Color palette generator
Create a 5-color palette from a color rule or a photo, check text contrast, and copy the codes.
How to use
- Choose a rule such as analogous or complementary, or switch to “From an image”.
- Press Generate (or the space bar), and lock the colors you want to keep.
- Copy the HEX codes or CSS variables, download a PNG, or save the palette as your brand colors.
Color palette generator
Harmony rules are based on the color wheel: analogous colors sit next to each other, complementary colors are opposite, triadic colors are 120° apart. Each swatch shows whether black or white text reads better on it, with the WCAG contrast ratio — 4.5:1 is the minimum for normal text.
“From an image” finds the main colors with k-means clustering on a small copy of your photo. Saving as brand colors stores four colors only in this browser, so the Logo Maker, favicon and thumbnail tools can use them.
Frequently asked questions
What does the lock do?
Locked colors stay when you generate again, so you can build a palette around colors you already like.
Is my photo uploaded when extracting colors?
No. The colors are calculated in your browser.
Which format should I use in CSS?
HEX is the most common; the tool also gives ready-to-paste CSS variables.