logo
OKLoCHer Studio

Palette editor

Build and refine a color palette using the perceptually uniform OKLCH color space. Adjust lightness, chroma, and hue, then copy the CSS custom properties into your project.

Add a color
Dial in a new OKLCH color.
0.650
0.180
264
Live Previewoklch(0.65 0.18 264)

Current palette

5 colors

Primary

oklch(0.55 0.22 264)

Accent

oklch(0.72 0.17 32)

Success

oklch(0.7 0.16 152)

Surface

oklch(0.96 0.01 264)

Ink

oklch(0.22 0.02 264)

:root {
  --primary: oklch(0.55 0.22 264);
  --accent: oklch(0.72 0.17 32);
  --success: oklch(0.7 0.16 152);
  --surface: oklch(0.96 0.01 264);
  --ink: oklch(0.22 0.02 264);
}