OKLCH is a perceptually uniform CSS color space — unlike HSL, equal steps in OKLCH's
lightness and chroma look equally different to the human eye, which makes it much better for generating
consistent color scales and accessible text-on-background contrast. This generator builds an OKLCH palette
from a single brand color and checks contrast for you, then gives you ready-to-use oklch() CSS.
OKLCH is a CSS color function (oklch(L C H)) based on a perceptually uniform color space — equal changes in its Lightness, Chroma and Hue values produce equally-perceived color changes, unlike HSL.
HSL's lightness is not perceptually uniform — e.g. pure blue and pure yellow at the same HSL lightness look very different in brightness. OKLCH lightness matches how bright a color actually appears, which makes generating consistent, accessible shade scales much easier.
Yes — oklch() is supported in all current versions of Chrome, Edge, Firefox and Safari. For older browsers, provide an RGB/hex fallback before the oklch() declaration.
This generator checks contrast against your chosen background color and suggests a light or dark text color that meets readable contrast, computed directly from the OKLCH lightness value.
Chroma controls how saturated or vivid a color is — 0 is grayscale, and higher values push the color toward its most vivid, fully-saturated version.
Yes — keep hue and chroma roughly fixed and step the lightness value down to generate a perceptually even light-to-dark scale, which is exactly what this generator's lightness slider does.
Yes — completely free with no sign-up, and it runs entirely in your browser.