npm i --save emoji-palette
#or
yarn add emoji-palette
#or
pnpm add emoji-palette
Came across some tweets by Shayan 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.
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.
// 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.
const dominantColor = palette[Math.floor(palette.length / 2)];Colors are returned as rgb strings.
You can see a live demo here Codesandbox example here
Thanks goes to these wonderful people
