usefulweb.appDependable little tools for people and AI agents. OKLCH Palette & Tint Scale Generator
Theme: Auto

Theme

Premium apps Part of Lumina

OKLCH Palette & Tint Scale Generator

Build perceptually even tint scales and hue harmonies in OKLCH, gamut-mapped for CSS.

More options
☁ Sign in to save to your Google Drive

Try an example: A nine-step teal scale · Triadic harmony at equal lightness · Vivid Display P3 scale

More about this tool

How it works

Start from any CSS color and generate a 3–15 step lightness scale or an OKLCH hue harmony. Colors are gamut-mapped to sRGB or Display P3 with the CSS Color 4 algorithm; each step reports contrast with white and black, and you can download CSS with HEX fallbacks, GPL, JASC-PAL and SVG.

  • Convert the base color to OKLCH (Ottosson 2020). A scale spreads OKLCH lightness evenly from the lightest to the darkest step at the base hue. Constant chroma keeps the base chroma; taper multiplies it by L(1 − L) relative to the base, capped at 1, so near-white and near-black steps carry less color.
  • A harmony keeps the base lightness and chroma and rotates the OKLCH hue: analogous ±spread, complementary 180°, split 180° ± spread, triadic 120°/240°, tetradic 60°/180°/240° and square 90° steps.
  • Every requested color is gamut-mapped to the target gamut with the CSS Color 4 binary search (chroma reduction at constant lightness and hue, deltaEOK JND 0.02). HEX values are sRGB; Display P3 palettes also export oklch() values for capable screens.
  • The report gives the smallest CIEDE2000 difference between neighbouring scale steps (or between any two harmony colors) and the WCAG 2 contrast of each color with white and black. Perceptual spacing is approximate: equal OKLCH steps are not guaranteed equal ΔE2000 steps.

Sources

Part of Lumina

  • Lumina Photo editor & image toolkit

    Bring out what you saw. A free photo studio, right in your browser.

    Open Lumina

Related tools

How to build an OKLCH tint scale or color harmony

Generate perceptually even OKLCH lightness scales and hue harmonies, gamut-mapped for CSS, with contrast and Delta E checks.

What it is for

Design systems need tint scales: a brand color in nine or eleven steps from almost white to almost black, each step looking evenly spaced. Building them in HSL gives uneven results — yellow steps look much lighter than blue steps at the same "lightness". OKLCH fixes that because its lightness follows how bright colors appear.

This tool starts from any CSS color and builds either a lightness scale at the base hue or a hue harmony (analogous, complementary, split, triadic, tetradic or square) at the base lightness and chroma. Each color is gamut-mapped to sRGB or Display P3 with the CSS Color 4 algorithm, then reported with its HEX fallback, oklch() value, and WCAG contrast with white and black. Downloads include CSS custom properties with HEX fallbacks plus oklch() overrides, GPL, JASC-PAL and SVG swatches.

Worked example

Take the teal #164E63, nine steps, lightest 97 %, darkest 25 %, tapered chroma, sRGB. The tool answers "OKLCH lightness scale: 9 steps from #F0F6F9 to #002635." Lightness drops by exactly 9 points per step:

Worked example
StepHEXOKLCHWhiteBlack
1#F0F6F997% 0.0081 227.391.0919.26
5#578BA261% 0.0659 227.393.745.62
6#3C718752% 0.0664 227.395.383.9
9#00263525.14% 0.0497 229.215.811.33

The contrast columns make token decisions easy: step 6 is the first that carries white body text (5.38:1), step 5 is the last that carries black text (5.62:1). One warning notes that step 9 was outside sRGB and lost a little chroma. The smallest neighbour difference is ΔE2000 7.58, between steps 8 and 9, so every step is clearly distinct.

Switch to Hue harmony → Triadic with base oklch(0.62 0.15 30): you get #D15D4D, #2E9E52 and #647EE0, all at 62 % lightness. Their contrasts with white sit close together (3.9, 3.43, 3.75), which HSL triads never achieve.

How to read the result

  • Requested values are what the generator asked for; OKLCH shows the final color after gamut mapping.
  • Chroma reduced = Yes means the requested color did not fit the target gamut.
  • Smallest ΔE2000 flags steps that are too similar (below about 3, a warning appears).
  • With Display P3, the CSS file overrides HEX with wider oklch() values on capable screens.

Tips and common mistakes

  • Tapered chroma avoids muddy near-whites and neon near-blacks; constant chroma suits accents.
  • Very saturated bases (vivid orange, violet) get chroma reduced at light and dark ends — expected.
  • Hue can drift by a few degrees after mapping, especially dark blues; that is CSS behaviour, not a bug.
  • Keep at least 5 lightness points between lightest and darkest; the tool rejects smaller ranges.
  • Harmony colors share lightness, so they work as equal-weight chart colors — check them in the color-blindness simulator.

FAQ

Why do my steps not all have the same Delta E?

Equal OKLCH lightness steps are close to, but not exactly, equal CIEDE2000 steps.

Can I use the oklch() values directly in CSS?

Yes, in browsers that support CSS Color 4. The CSS file sets HEX first and overrides it with oklch() only inside @supports, so older browsers keep the fallback.

What does the taper do exactly?

It multiplies the base chroma by L(1 − L) relative to the base color, capped at the base chroma.

Does Palette Studio use the same generator?

Yes. Color Atlas → OKLCH palette uses this engine and can add the result as a palette group.

Guide last updated:

For scripts and AI agents

  • JSON API: POST https://luminaoklchpalette.usefulweb.app/api/v1/calculate (same calculation as this page)
  • Interface description: OpenAPI 3.1 · AI guide: llms.txt
  • MCP server (Streamable HTTP): https://luminaoklchpalette.usefulweb.app/mcp · tool name lumina_oklch_palette
Example request
curl -s -X POST https://luminaoklchpalette.usefulweb.app/api/v1/calculate \
  -H 'content-type: application/json' \
  -d '{"base":"#164E63","mode":"scale","harmony":"triadic","spread":30,"count":9,"lightest":97,"darkest":25,"chroma":"taper","gamut":"srgb"}'
Feedback · ideas & bug reports welcome