oklch Colors in React
Perceptually uniform colors that look consistent across hues. 5 built-in presets with oklch — no manual shade tuning.
:root {
--color-primary: oklch(0.55 0.25 280);
--color-success: oklch(0.60 0.18 145);
--color-warning: oklch(0.70 0.18 85);
--color-danger: oklch(0.55 0.22 25);
}Key features
Perceptually uniform — equal numeric changes = equal visual changes
5 built-in presets: default, forest, sunset, ocean, monochrome
Automatic shade generation for hover/active/disabled states
Consistent lightness across all hues
Better accessibility contrast ratios
Native CSS support — no polyfill needed in modern browsers
What is oklch?
oklch is a color space designed to be perceptually uniform. Unlike HSL or RGB, equal numeric changes in oklch produce equal visual changes. This means a 10% lightness increase looks the same whether you're adjusting blue, red, or green.
For UI design systems, this is transformative. When you generate hover states, disabled states, and focus rings by adjusting lightness, the results look consistent across all colors — no manual tuning per hue.
oklch in Tailwind CSS v4
Tailwind v4 supports oklch natively. Ninna UI defines all theme colors as oklch custom properties:
/* Primary button hover state — automatic shade */
[data-slot="button"]:hover {
background-color: oklch(from var(--color-primary) calc(l + 0.08) c h);
}