Color palette generator
Start from one colour and get matching palettes, each swatch with its HEX and RGB values and its contrast against white and black.
Runs entirely in your browser
Random palette
Five colours from your browser's random number generator. Lock the ones you want to keep, then draw again. Press the Space bar to draw when no text field has focus.
Export
Palettes are built in the OKLCH colour space and shown as sRGB HEX, so colours too vivid for a screen are toned down in chroma. Contrast figures use the WCAG 2 formula, which measures lightness contrast only.
How to make a colour palette
- Choose a base colour with the picker, or type a value such as
#1636a3orf60into the HEX field. - Read the harmony palettes below it. Each swatch shows its HEX, RGB and whether black or white text passes WCAG AA or AAA on it.
- Pick a palette under Export and copy or download it as CSS custom properties, a JSON array or a plain list. Use Random palette and the lock buttons to explore.
How the harmonies are built
A colour harmony is a set of colours whose hues sit at fixed angles around the colour wheel. Analogous colours are neighbours, 30 degrees apart. A complementary colour is 180 degrees away, a split-complementary pair sits 150 and 210 degrees away, a triad is spaced 120 degrees apart, and a tetrad uses four hues 90 degrees apart. The monochromatic palette keeps the hue and steps the lightness from pale tints to dark shades.
The wheel used here is OKLCH, the cylindrical form of Björn Ottosson's OKLab space. The conversion goes from sRGB to linear light, then through the OKLab matrices, and back again with a gamut check. If a rotated colour falls outside what sRGB can show, its chroma is reduced in small steps until it fits, so the lightness and hue you chose are kept.
Contrast is reported for every swatch against both white and black, because the first question about a palette colour is usually what text can sit on it. The ratio and the AA or AAA wording are always written out, so the information does not depend on seeing colour.
Tips
- Need the same colour as HSL, CMYK or a CSS name? Use the Color converter.
- Turn two palette colours into a background with the CSS gradient generator.
- Want a colour taken from a photo rather than a wheel? Try the Image colour picker.
Questions
Why OKLCH instead of HSL?
In HSL, a yellow and a blue with the same lightness value look very different in brightness. OKLCH is built so that equal lightness steps look equal, which keeps a palette's swatches even in weight. Hue is the angle used for the harmonies, so a complementary colour sits 180 degrees from your base in OKLCH, not in HSL.
What happens when a colour cannot be shown on a screen?
Rotating a hue while keeping the lightness and chroma sometimes lands outside the sRGB range that a normal display can show. The tool then lowers the chroma, keeping lightness and hue, until the colour fits. That is why a rotated swatch can look a little less vivid than the base.
What do the AA and AAA labels mean?
They report the WCAG 2 contrast ratio of white or black text on that swatch. A ratio of 4.5 or more is AA for normal text, 7 or more is AAA, and 3 to 4.5 passes AA only for large text. A swatch that fails both black and white is a poor background for text.
How does the random palette work?
Five colours are drawn with the browser's secure random number generator: hues spread around the wheel, with random lightness and chroma in a range that avoids near-black and near-white. Lock a swatch to keep it, then press Random palette or the Space bar to replace the others.
Which export format should I use?
CSS custom properties paste straight into a stylesheet's :root block. The JSON array suits design tokens or scripts, and the plain list is one HEX per line for tools that accept pasted colours. All three use the displayed HEX values.
Does it handle shorthand HEX and capital letters?
Yes. #abc, abc, #AABBCC and aabbcc are all read. Values with an alpha pair, such as eight digits, are not accepted here; use the Color converter to drop the alpha first.