Color palette generator Free
Build harmonious colour palettes from one base colour, lock the swatches you like, check WCAG contrast and export CSS, JSON or PNG.
Press Space to generate when the palette has focus. Locked swatches stay put.
Contrast checker
Contrast checker
Large heading text
Normal body text at 16 pixels should be easy to read for everyone.
Button outline3.62:1 contrast ratio
- AA normal textneeds 4.5:1Fail
- AA large textneeds 3:1Pass
- AAA normal textneeds 7:1Fail
- AAA large textneeds 4.5:1Fail
- UI componentsneeds 3:1Pass
Export
Export palette
:root {
--palette-1: #2f7d6d;
--palette-2: #2f7d46;
--palette-3: #2f667d;
--palette-4: #3f7d2f;
--palette-5: #2f3f7d;
}About Color palette generator
Pick a base colour and a harmony rule — analogous, complementary, triadic, tetradic, monochrome or random — and the generator builds a matching palette of three to eight swatches. Lock any swatch you want to keep, then shuffle the rest until the set feels right. Every swatch shows its HEX, RGB and HSL values and can be copied with one click.
A built-in contrast checker compares any two colours (from the palette or typed in) against the WCAG 2.2 thresholds for normal text, large text and interface elements, so you can tell early whether a text and background pairing will be readable.
How to use it
- Choose a base colour with the picker or type a HEX, rgb() or hsl() value.
- Pick a harmony rule and the number of swatches, then press Generate. Press the lock on any swatch to keep it.
- Choose a text and a background colour in the contrast checker to see the ratio and which WCAG levels pass.
- Copy a single value, or export the whole palette as CSS custom properties, JSON or a PNG swatch card.
Good to know
- Harmonies are calculated in the HSL colour model, which is simple and predictable but not perceptually uniform, so two swatches with the same lightness can look slightly different in brightness.
- Contrast uses the WCAG 2.x relative-luminance formula. It does not cover the newer APCA method, and it cannot judge font weight or size for you.
- Palettes are kept only while the page is open unless you export them.
Questions and answers
What does locking a swatch do?
A locked swatch keeps its exact colour when you generate again or change the harmony, so you can build a palette around colours you have already chosen.
Which contrast ratio do I need?
WCAG AA asks for at least 4.5:1 for normal body text and 3:1 for large text (about 24 px, or 19 px bold) and for interface parts such as input borders. AAA raises the text targets to 7:1 and 4.5:1.
Why does the same rule give slightly different palettes each time?
Generate adds a small random variation to saturation and lightness while keeping the hue relationships of the rule, so you can explore alternatives. Lock the swatches you want to keep.
How do I use the CSS export?
It produces a :root block with one custom property per swatch, such as --palette-1. Paste it into a stylesheet and use var(--palette-1) wherever you need the colour.