Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The oklch() functional notation expresses a given color in the OKLCH color space. It has the same L axis as oklab(), but uses polar coordinates C (Chroma) and H (Hue).
oklch(40.1% 0.123 21.57) oklch(59.69% 0.156 49.77) oklch(59.69% 0.156 49.77 / .5)
oklch(L C H [/ A])
L specifies the perceived lightness, and is a <percentage> between 0% representing black and 100% representing white.
The second argument C is the chroma (roughly representing the "amount of color"). Its minimum useful value is 0, while its maximum is theoretically unbounded (but in practice does not exceed 0.4).
The third argument H is the hue angle. 0deg points along the positive "a" axis (toward purplish red), 90deg points along the positive "b" axis (toward mustard yellow), 180deg points along the negative "a" axis (toward greenish cyan), and 270deg points along the negative "b" axis (toward sky blue).
A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).
| Specification |
|---|
| CSS Color Module Level 4 # ok-lab |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
oklch |
No |
No |
No |
No |
No |
15.4 |
No |
No |
No |
No |
15.4 |
No |
oklch() and oklab() colors.
© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch