Colour Palette Generator

The generator does two distinct jobs, each grounded in well-defined mathematics rather than a black-box model.

Harmony rotation

A base colour you enter (or pick) is converted from sRGB to HSL using the W3C CSS Color Module Level 4 algorithm. The hue is then rotated by fixed degrees on the colour wheel to produce each named harmony:

• Complementary: H + 180° (one opposite).
• Triadic: H + 120°, H + 240° (three evenly spaced).
• Tetradic (rectangle): H + 60°, H + 180°, H + 240° (two complementary pairs).
• Square: H + 90°, H + 180°, H + 270° (four evenly spaced).
• Analogous: H − 30°, H, H + 30° (a 60° arc).
• Split-complementary: H, H + 150°, H + 210° (complement's two neighbours).
• Monochromatic: same hue, lightness stepped from ~15% to ~85%.
• Tints & shades: same hue and saturation, base lightness ± 30 points in steps.

Each rotated HSL value is converted back to sRGB (eight-bit per channel) and then to a hex string. Every conversion in this tool round-trips through RGB → HSL → RGB within 1/255 per channel for the brand colours, the RGB primaries, sky-blue, rebeccapurple, mid-grey, black, and white. The verifyRoundTrip() function in the source runs this check on every page load.

Image extraction (median-cut)

When you drop an image, the tool first downsamples it to a maximum of 200 px on its longest edge using the Canvas 2D high-quality resampler. That reduces the work to about 40,000 pixels even for a phone photo. Fully-transparent pixels are skipped, and the remaining RGB triples go into a single bucket.

The tool then repeatedly splits the bucket with the widest range — on the red, green, or blue axis, whichever has the largest spread — at its median position, until there are six buckets. Each final bucket is averaged to one representative RGB value. The six swatches are sorted by ITU-R BT.709 luma (darkest first) and deduplicated, then shown with a one-click Use as base action that pipes any extracted colour back into the harmony generator.

This is Paul Heckbert's median-cut algorithm from his 1980 MIT master's thesis — the same algorithm GIMP and the GIF format use. It produces palettes that look perceptually faithful to the source without any AI, training data, or upload.

Export formats

Each palette card offers four export targets: a plain HEX list (one colour per line), CSS custom properties (the :root { --x: #hex } block you can paste into a stylesheet), a Tailwind v4 @theme inline block using the --color-* token convention introduced in Tailwind's v4 theme rework, and JSON for design-token tooling. Click a chip and the snippet is on your clipboard.

• W3C — CSS Color Module Level 4 (RGB ↔ HSL conversion)
• Heckbert (1980) — Color image quantization for frame buffer display (median-cut)
• Adobe — Colour theory: complementary, triadic & tetradic schemes
• Adobe Color — canonical harmony angles
• ITU-R BT.709 — luminance coefficients used for sorting
• WCAG 2.2 — relative luminance formula
• Tailwind CSS v4 — @theme blocks and --color-* tokens

The HSL conversions and harmony rotations on this page were last cross-checked against the W3C reference on 2026-05-11. The page is reviewed when CSS Color Module advances past Level 4 or when Tailwind ships a v5 that changes the token format.