OKLCH Harmonizer

Rotate hue and step lightness in the perceptually uniform OKLCH space — the same harmony rules, but the palettes simply look better than HSL. Every derived swatch can be tuned independently, with live WCAG contrast.

#2b9d8f

Basevs white 3.3 · vs black 6.3

L · 63%C · 0.101H · 183°

#957abc

H +120°vs white 3.6 · vs black 5.8

L · 63%C · 0.101H · 303°

#b47b44

H +240°vs white 3.6 · vs black 5.9

L · 63%C · 0.101H · 63°

Export

Open in board

:root {
  --harmony-1: #2b9d8f;
  --harmony-2: #957abc;
  --harmony-3: #b47b44;
}

[
  {
    "hex": "#2b9d8f",
    "oklch": "oklch(63.0% 0.101 183.0)",
    "role": "base"
  },
  {
    "hex": "#957abc",
    "oklch": "oklch(63.0% 0.101 303.0)",
    "role": "harmony-2"
  },
  {
    "hex": "#b47b44",
    "oklch": "oklch(63.0% 0.101 63.0)",
    "role": "harmony-3"
  }
]

Generate OKLCH harmonies in three steps

Perceptually uniform harmonies with live contrast and gamut mapping at every step.

01
Base & rule
Type or randomize a HEX, then pick complementary, split-complementary, triadic, tetradic, analogous or monochromatic.
02
Fine-tune
Every derived swatch has L/C/H sliders in the OKLCH space; out-of-gamut values map to the nearest displayable color.
03
Export
Watch vs-white/black contrast live, copy CSS variables or JSON, or send the whole set to the palette board.

Harmonizer FAQ

Three common questions about OKLCH harmonies.

How is OKLCH harmony different from wheel-based harmony?: In HSL, "equal lightness" is not perceptually equal — rotated yellows glare and blues turn dull. OKLCH is perceptually uniform, so hue rotation truly preserves lightness and chroma, yielding naturally balanced palettes.
What if a slider goes outside the screen gamut?: The OKLCH space is larger than sRGB. Out-of-gamut values are automatically mapped to the nearest displayable color, so the hex you see is the hex you can use.
How do I use the result in my project?: Copy the :root CSS variables or JSON from the export area, or open the set in the palette board to lock, reroll and export PNG/ASE and more.

After you get the result

Keep going from here and put the colors to work.

Color Wheel

Drag the wheel to pick a base, get six harmony schemes live, open in the board or export PNG.

OKLCH Editor

Tune L / C / H in the perceptually uniform OKLCH space with live preview and oklch() / HEX / RGB output.

Semantic UI Palette

Feed one brand color, get primary / secondary / success / warning / danger — exported as Tailwind config and CSS variables.

Palette Board

Spacebar to randomize, lock, drag to reorder, share by URL - everything a palette board should do.

[ { "hex": "#2b9d8f", "oklch": "oklch(63.0% 0.101 183.0)", "role": "base" }, { "hex": "#957abc", "oklch": "oklch(63.0% 0.101 303.0)", "role": "harmony-2" }, { "hex": "#b47b44", "oklch": "oklch(63.0% 0.101 63.0)", "role": "harmony-3" } ]

Generate OKLCH harmonies in three steps

Perceptually uniform harmonies with live contrast and gamut mapping at every step.

Base & rule

Type or randomize a HEX, then pick complementary, split-complementary, triadic, tetradic, analogous or monochromatic.

Fine-tune

Every derived swatch has L/C/H sliders in the OKLCH space; out-of-gamut values map to the nearest displayable color.

Export

Watch vs-white/black contrast live, copy CSS variables or JSON, or send the whole set to the palette board.

Harmonizer FAQ

Three common questions about OKLCH harmonies.

How is OKLCH harmony different from wheel-based harmony?

In HSL, "equal lightness" is not perceptually equal — rotated yellows glare and blues turn dull. OKLCH is perceptually uniform, so hue rotation truly preserves lightness and chroma, yielding naturally balanced palettes.

What if a slider goes outside the screen gamut?

The OKLCH space is larger than sRGB. Out-of-gamut values are automatically mapped to the nearest displayable color, so the hex you see is the hex you can use.

How do I use the result in my project?

Copy the :root CSS variables or JSON from the export area, or open the set in the palette board to lock, reroll and export PNG/ASE and more.