Color Palette Generator

How to use the color palette generator

1. Press New palette (or the space bar on a keyboard) to get five colors that follow a color harmony. Each press draws a new random palette.
2. Lock the colors you like with the padlock under each swatch. Locked colors stay where they are while the others change; in random mode the first locked color also becomes the anchor the new colors are built around, so they keep matching it.
3. Start from your own color: switch Start from to My base color and choose it — a brand color, for example. Every palette then contains that exact color.
4. Pick a harmony (analogous, monochromatic, complementary, split-complementary, triadic, tetradic, or shades and tints), or leave it on Any to get a different one each time.
5. Fine-tune a color with the pencil, which opens your device’s color chooser; the edited color is locked automatically.
6. Take colors from a photo: press Colors from an image, drop a file on the tool or paste a screenshot. The five main colors of the image are found and locked.
7. Copy and export: tap any code to copy it, switch the codes between HEX, RGB, HSL and OKLCH, copy the whole palette as CSS variables or JSON, or download a PNG with the five swatches. Copy link gives an address that opens exactly this palette.

Everything runs in your browser. An image you load is read on your device, shrunk to at most 100 pixels on its longest side and analyzed there; it is never uploaded.

Why the palettes are generated in OKLCH

Most color wheels — HSL in CSS, HSV/HSB in design apps — are simple rearrangements of the red, green and blue channels, not models of how people see. At the same HSL lightness of 50%, pure yellow looks far brighter than pure blue, so a palette that rotates the hue in HSL jumps between glaring and murky colors. This generator works in OKLCH, the polar form of OKLab, a perceptual color space published by Björn Ottosson in 2020 and adopted in the CSS Color Module Level 4 as the oklch() function. Its three numbers are L (perceived lightness, 0–100%), C (chroma, how colorful: 0 is gray, sRGB colors reach about 0.32) and H (hue angle in degrees). Equal steps in L look like equal steps in brightness, whatever the hue.

Converting a color takes three steps: undo the sRGB gamma curve to get linear light, multiply by a fixed matrix to get cone-like responses and take their cube roots, then multiply by a second matrix to get L, a and b. Chroma is √(a² + b²) and hue is atan2(b, a). Reference values from this tool, which match the published ones:

Not every OKLCH color exists on a screen. When a planned color falls outside the sRGB gamut, the generator keeps its lightness and hue and lowers its chroma until it fits — the same idea as the gamut mapping in CSS Color 4 — so the palette never shifts hue just because a color was clipped.

How a palette is built

Every palette starts from an anchor: your base color, the first locked color, or a random color with a lightness between 45% and 80% and a moderate chroma. The four other colors get the hues of the chosen harmony and lightness levels spread between 30% and 90% (the level closest to the anchor is skipped, so every color differs from it in lightness). Chroma varies by up to 30% around the anchor’s and tapers off toward very light and very dark colors, which look garish when fully saturated. A random number drawn when you press New palette drives every choice, and the same number always gives the same palette — that is how a copied link reproduces your colors exactly.

Because the hue angles are measured on the OKLCH wheel, the complement of a color can differ from what an HSL or painter’s (red-yellow-blue) wheel shows: the OKLCH complement of navy #1f4e79 (hue 249°) is a warm olive-orange hue near 69°.

Worked example: a triadic palette from #1f4e79

With the base color #1f4e79 (OKLCH lightness 41.4%, chroma 0.088, hue 249.1°) and the triadic harmony, the page’s starting seed produces the colors below. Hues sit near 249°, 9° and 129°, each 120° apart, and the lightness levels range from 28.7% to 92.9%:

The contrast columns tell you which text works on each color. Dark burgundy carries white text at 14.66:1, the pale pink carries black text at 16.79:1, and the middle green reaches only 3.64:1 with white — fine for large headings, too low for body text.

Contrast ratios and accessibility

Each swatch shows the better of white or black text on it, with its ratio and grade, and the contrast table under the palette lists both. The numbers follow the Web Content Accessibility Guidelines (WCAG) 2.2 from the W3C: relative luminance is 0.2126 R + 0.7152 G + 0.0722 B of the linearized channels, and the ratio is (lighter + 0.05) / (darker + 0.05), from 1:1 to 21:1. Normal text needs 4.5:1 for level AA and 7:1 for AAA; large text (24 px, or 18.7 px bold) needs 3:1 for AA. Ratios are cut, not rounded, at two decimals, so a color never shows a pass it doesn’t reach.

Tips for using a palette

• Give the colors roles. A common split is 60% background or dominant color, 30% secondary and 10% accent; the darkest color often works as text.
• Check text before you commit. Use the contrast table, or paste any pair into the color picker to see its codes and contrast.
• Don’t rely on hue alone. About 1 in 12 men has a red-green color vision deficiency; vary lightness too, and try the color blindness test to understand what people may miss.
• Use the CSS export as a starting point for design tokens: rename --color-1 and friends to roles such as --brand or --surface.

Frequently asked questions

Last updated: October 15, 2026