Build a colour palette
Pull the colours out of an image, or grow a full set from one you already have. Copy the result as code rather than one swatch at a time.
Pick an image and its colours appear here.
Questions
- How are the colours chosen from an image?
- By median cut, the standard quantisation algorithm, using the same MIT licensed library Color Thief is built on. The image is scaled down first, because a twelve megapixel photo has far more pixels than the answer needs, and near-white pixels are skipped since they otherwise dominate every palette taken from a product photo.
- Why does Shades come first rather than a wheel of harmonies?
- Because it is the one a real design system needs. One hue at nine lightness steps is what actually goes into a config file. Complementary and triadic are useful for setting a mood, but you cannot build an interface out of five unrelated hues.
- Can I get the palette as code?
- Yes, and that is the point. Hex, CSS custom properties, a Tailwind colour scale, SCSS variables or JSON. Copying six hex codes one at a time and retyping them into a config is the tedious part, so the tool does that part.
- Is my image uploaded?
- No. It is read and analysed inside your browser and never sent anywhere.