euotiniel/emoji-palette

🏇 Get color palettes from emojis

🏇
emoji-palette

Get color palettes for emojis.

npm i emoji-palette

Install

npm i --save emoji-palette
#or
yarn add emoji-palette
#or
pnpm add emoji-palette

About

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.

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

// 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

Sponsors ✨

Thanks goes to these wonderful people