https://github.com/anubra266/emoji-palette

🏇 Get color palettes from emojis
https://github.com/anubra266/emoji-palette

color color-palette emoji javascript

Last synced: about 2 months ago
JSON representation

🏇 Get color palettes from emojis

• Host: GitHub
• URL: https://github.com/anubra266/emoji-palette
• Owner: anubra266
• License: mit
• Created: 2023-01-23T23:39:32.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-03T21:44:59.000Z (9 months ago)
• Last Synced: 2024-10-10T12:06:31.465Z (2 months ago)
• Topics: color, color-palette, emoji, javascript
• Language: TypeScript
• Homepage: https://anubra266.github.io/emoji-palette/
• Size: 758 KB
• Stars: 62
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  


    


    🏇

    


    emoji-palette

    


    


  

  

    


    


    

       

    

    

      

    



    







    


   Get color palettes for emojis.

    

  

  


  


  


  


  
npm i emoji-palette

  


  


  


  


  




## Install

```bash

npm i --save emoji-palette

#or

yarn add emoji-palette

#or

pnpm add emoji-palette

```











## About

Came across some tweets by [Shayan](https://twitter.com/imsh4yy?s=21&t=ETlRoiFLQAAJRfdOAWUkEg) about LogSnag. He put up this amazing UI where gradients were formed based on a selected emoji. I scourged the comments for any hint on how he achieved this, found none, so I decided to create mine.

## How does it work

When you pass in an emoji as a string, it gets drawn unto an html canvas. This allows us to get the image back as a base64 encoded image.

From this, we're able to move through the pixels in the image to get all the relevant colors.

## Usage

```ts

// import generatePalette

import { generatePalette } from "emoji-palette";

// Pass your emoji to this method

const palette = generatePalette("👍");

```

The method returns an array of colors, in their order of luminance.

So you can get the median color in the palette if you need one.

```ts

const dominantColor = palette[Math.floor(palette.length / 2)];

```

Colors are returned as `rgb` strings.

You can see a live demo [here](https://anubra266.github.io/emoji-palette/)

Codesandbox example [here](https://codesandbox.io/p/sandbox/confident-silence-l6cbju)

## Sponsors ✨

Thanks goes to these wonderful people