Color Tools

Color wizard

Build a complete, ready-to-use color palette starting from a single color. Pick a hue, choose how the rest of the palette relates to it, and get interface-ready roles — background, text, borders, and more — with contrast already checked.

Set a starting color with the sliders or a hex code, then choose a harmony type below. Click any swatch to add it to your palette on the right, and copy the finished set as CSS custom properties when you're done. For the reasoning behind each harmony type, see combining colors.

H {{ okhsl.h.toFixed(0) }}° · S {{ okhsl.s.toFixed(0) }}% · L {{ okhsl.l.toFixed(0) }}%
OKHSL controls
OKHSL works like familiar hue, saturation, and lightness controls — but it's built to match how people actually perceive color, so equal steps look equally even and every combination stays valid. Colors are still exported as standard hex values.
°
%
%
{{ harmonyLabels[ci] }}
Usable UI palette (role-based, with contrast checks)
Perceptual Lightness Scale (lightness varies, chroma & hue fixed)
Chroma range (hue & lightness fixed)
Hue variations (chroma & lightness fixed)
Color scheme preview
{{ baseHex }} Main
{{ hex }}

Click any small swatch to add it here.

How this tool works

OKHSL input, not traditional HSL

The hue, saturation, and lightness sliders use OKHSL rather than classic HSL. Classic HSL assumes every hue looks equally bright at the same lightness value, which isn't true — pure blue and pure yellow at "50% lightness" look nothing alike. OKHSL is built on OKLab, a color space designed to match how human vision actually perceives brightness and colorfulness, so equal steps in lightness or saturation look even to the eye regardless of hue. It's also gamut-safe: every combination in the 0–100 range is guaranteed to be a color your screen can actually display.

Harmony types

  • Complementary — one color directly opposite the base on the color wheel. Highest contrast, easiest to overuse.
  • Analogous — colors next to the base, for a calm, cohesive palette.
  • Triadic — three colors evenly spaced around the wheel, for balanced variety.
  • Split Complementary — the base plus the two colors flanking its complement, for contrast without the harshness.
  • Tetradic — four colors in two complementary pairs, for the most variety, and the hardest to balance.
  • Monochromatic — variations in lightness of a single hue, for a quiet, unified look.

Tonal palettes and ramps

Each harmony color also generates its own five-step tonal scale, so you're picking small palettes rather than single colors. The lightness, chroma, and hue ramps below let you explore the base color along one dimension at a time, holding the other two fixed.

The usable UI palette

The seven roles — background, surface, two kinds of border, primary, accent, and text — use different lightness and saturation targets suited to each one, rather than reusing the base color's own lightness everywhere. Border is split in two because WCAG treats them differently: a decorative border has no contrast requirement, while a border that identifies a control, like an input field, needs at least 3:1 against its background under WCAG 1.4.11. Primary, accent, and text are checked against 4.5:1, the standard for readable text.

Gamut mapping

Some colors requested by the sliders or ramps fall outside what a screen can display. Rather than distorting the hue when that happens, this tool holds the hue and lightness fixed and reduces only the intensity until the color is displayable — so colors stay true to the requested hue even at the edges of what's possible.