Color Palette Generator
Build palettes in OKLCH — harmonies, tint & shade scales, random palettes with locks, or colours pulled from an image — and export as CSS, Tailwind, SCSS or JSON
How it works
Pick a base colour and a scheme, and the generator rotates the hue in OKLCH — the perceptual colour space behind modern CSS — so every colour in an analogous, complementary, split-complementary, triadic or tetradic palette keeps the same perceived lightness and vividness as the base, then pulls chroma back only as far as needed to stay inside sRGB. Monochromatic spreads one hue across lightness. Tints & shades builds a Tailwind-style 50–950 scale with evenly spaced OKLCH lightness steps, chroma that fades toward white and black, and your exact base colour placed at its nearest step. Random draws a mid-toned base and a scheme; lock the swatches you like and press Shuffle (or the space bar) to regenerate the rest. From image downsizes a picture on your device and clusters its pixels with k-means in OKLab to find the dominant colours. Every swatch copies its hex on click, shows whether white or black text reaches WCAG AA on it, and lists HSL and OKLCH values; the export panel writes the palette as CSS custom properties, a Tailwind theme block, SCSS variables or JSON. The palette lives in the URL, so Share reproduces it.
Questions
Why OKLCH instead of HSL?
HSL hue rotations change how light a colour looks — yellow at 50% HSL lightness is far brighter than blue at 50%. OKLCH lightness matches perception, so a triadic palette in OKLCH has three colours of genuinely equal weight, and a tint scale steps evenly. It is also what CSS oklch() uses.
How is the tint and shade scale built?
Eleven fixed OKLCH lightness targets from 97.5% (50) down to 20% (950) with the base hue throughout. Chroma follows a curve that peaks around mid-lightness and fades toward the ends, scaled so your base keeps its own chroma; the base colour itself replaces the step whose lightness is closest to it.
How does extraction from an image work?
The image is drawn at up to 96 pixels on its long side, its pixels are converted to OKLab and clustered with k-means (deterministic seeding, so the same image gives the same palette). Colours are listed by how many pixels they cover; near-duplicates are merged. Nothing is uploaded.
What does the contrast note on each swatch mean?
It reports whether white or black text on that colour reaches the WCAG AA ratio of 4.5:1, and the table shows both ratios. Use it to decide text colour on buttons and badges.
Which export formats are there?
CSS custom properties (--palette-1 … or --primary-50 … for scales), a Tailwind theme.extend.colors block, SCSS variables, and JSON. Click any swatch to copy just its hex.
Can I share a palette?
Yes — mode, base colour, scheme, count and the generated colours are in the page URL, so the Share button reproduces exactly what you see.