Skip to content

anubra266/emoji-palette

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

34 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation


πŸ‡
emoji-palette



npm package npm  downloads NPM

GitHub Repo stars


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
CleanShot 2023-01-24 at 14 50 44@2x CleanShot 2023-01-24 at 14 50 29@2x CleanShot 2023-01-24 at 14 50 15@2x

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