OKLCH Browser Support

The oklch() function is part of CSS Color 4 and is supported across all current major browsers — Chrome, Edge, Safari and Firefox. For most projects you can use it directly.

Shipping a fallback

For older engines, declare an sRGB value first and let modern browsers override it:

.button {
  background: #3b82f6;              /* fallback */
  background: oklch(0.62 0.21 259); /* modern */
}

Or gate it with a feature query:

@supports (color: oklch(0 0 0)) {
  .button { background: oklch(0.62 0.21 259); }
}

Wide-gamut note

A browser supporting oklch() may still render on an sRGB display. Colors outside sRGB are gamut-mapped by the browser, so always verify vivid colors on the target hardware. The bulk converter can add fallbacks across a whole file.