OKLCH-based brand palettes. Pick a base, get every classic harmony plus a 50–950 tonal scale. Lock, re-roll, export as CSS / Tailwind v4 / SCSS / JSON.
OKLCH-based brand palettes. Pick a base, get every classic harmony plus a 50–950 tonal scale. Lock, re-roll, export as CSS / Tailwind v4 / SCSS / JSON.
Our Color Picker & Converter is for one colour at a time — pick / convert / copy. This tool is for palettes: drop in a base colour, get a whole brand-ready system (harmonies + tonal scale) in one shot. It's the difference between buying a single shirt and getting a wardrobe.
HSL spaces hues unevenly (yellow at 60° feels much brighter than blue at 240° even at the same lightness value). A triadic palette in HSL has one swatch that's noticeably brighter or duller than the others. OKLCH is perceptually uniform — three swatches at the same OKLCH lightness look the same brightness. That's why every modern design system (Apple HI, Tailwind v4, IBM Carbon) is moving to OKLCH for harmonies and scales.
Your brand colours never leave your device. Open DevTools → Network and you'll see zero outbound requests during any operation.
Tip: press Space to re-roll unlocked swatches.
OKLCH harmonies, tonal scales, lock-and-reroll, design-token exports — and a few small touches that make it actually fun to use.
Complementary, analogous, triadic, tetradic, split-complementary, monochromatic — all computed in OKLCH so a triadic palette of three saturated brights stays evenly bright. No HSL muddiness.
Drop in your brand colour, get a Tailwind-shape 50, 100, 200, … 900, 950 tonal scale generated by walking lightness across an OKLCH curve. Chroma compresses at the extremes so colours stay in sRGB gamut.
Pin any swatch (lock icon) and hit Re-roll (or just press Space) to vary the rest within the chosen harmony. Iterate fast, keep what you love.
CSS custom properties (--brand-500), Tailwind v4 @theme block, SCSS map, and JSON design tokens ready for Style Dictionary / Figma Tokens. Plus a 1200×200 PNG swatch strip.
Every swatch shows its WCAG contrast ratio against the better of black or white, with an AA / AAA / fail badge. Spot accessibility problems before they ship.
Every byte stays on your device. OKLCH math, harmony generation, scale derivation, PNG export all run as JavaScript locally. Open DevTools → Network and verify zero outbound requests.
Four steps from one base colour to a complete design-token-ready palette.
Click the colour box, paste a HEX, or hit Random base for inspiration. The tool centres the entire palette on this colour — both the harmony swatches and the 11-step tonal scale.
Default is Analogous — three colours within 30° of the base, perfect for calm brand palettes. Complementary for contrast accents. Triadic / Tetradic for editorial / playful brands. Monochromatic for tonal one-hue systems. All computed in OKLCH so they stay evenly bright.
Click the lock icon on any swatch you want to keep, then press Space (or hit Re-roll) to vary the rest within the harmony. Iterate fast. Edit any swatch directly by clicking its HEX field if you want to nail an exact value.
Copy the CSS output (custom properties), Tailwind v4 (@theme block), SCSS map, or JSON design tokens. Or hit Download PNG for a 1200×200 swatch strip ready to drop into a design brief.
Four common scenarios where a privacy-first OKLCH palette tool beats hand-tuning hex codes in Figma.
You have a brand colour, you need a system around it. Drop in the HEX, pick Analogous, re-roll until two supporting colours sing, lock all three. Switch to a Tonal Scale view, copy the Tailwind @theme block, paste into the new project's app.css. Total time: 5 minutes.
The default Tailwind indigo isn't your brand. Your brand is #5B3FCD. Drop it in, get an 11-step tonal scale that perfectly mirrors Tailwind's spacing. Copy the @theme block — every bg-brand-500 / text-brand-700 just works.
Every swatch shows its WCAG contrast ratio + AA/AAA badge. Spot-check that brand-500 hits AA against white, and brand-100 stays readable as a background tint with brand-900 text. Fix problem swatches by re-rolling them individually.
Agencies / multi-brand companies maintain N parallel design systems, each with the same shape but a different brand hue. Use the same harmony + tonal-scale workflow for every brand, export each as JSON tokens, drop into Style Dictionary. Consistent shape, distinct identity.
Your brand colours never leave your device. Open DevTools → Network and you'll see zero outbound requests during any operation.
canvas; the swatch image is generated entirely in browser memory and downloaded as a Blob — nothing crosses the network.
Hand-picked reads on OKLCH palettes, brand colour systems, and design tokens.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Our Color Picker & Converter is for one colour at a time — pick / convert / copy. This tool is for palettes: drop in a base colour, get a whole brand-ready system (harmonies + tonal scale) in one shot. It's the difference between buying a single shirt and getting a wardrobe.
HSL spaces hues unevenly (yellow at 60° feels much brighter than blue at 240° even at the same lightness value). A triadic palette in HSL has one swatch that's noticeably brighter or duller than the others. OKLCH is perceptually uniform — three swatches at the same OKLCH lightness look the same brightness. That's why every modern design system (Apple HI, Tailwind v4, IBM Carbon) is moving to OKLCH for harmonies and scales.
It's the Tailwind-style brand-colour scale: indigo-50 (lightest), indigo-100, indigo-200, … indigo-900, indigo-950 (darkest). Drop in your brand colour and the tool generates all 11 steps automatically by walking OKLCH lightness across a fixed curve. The result is a drop-in replacement for any Tailwind palette token, in your brand hue.
Click the lock icon in the top-left of any swatch — it stays put. Then hit Re-roll or press Space to vary every unlocked swatch within the chosen harmony. This is how you find a great palette: pin the brand colour you've already committed to, explore variations around it.
No. OKLCH math, harmony generation, tonal-scale derivation, contrast-ratio computation, PNG export, every clipboard copy — all run in JavaScript on your device. Open DevTools → Network and you'll see zero outbound requests. Paste your brand colours, internal design tokens, NDA-locked palettes — nothing leaves your laptop.