oklch()
A color in the OKLCH space: perceived lightness, chroma and hue.
Syntax
oklch(lightness chroma hue / alpha)Parameters
| Parameter | Type | Description |
|---|---|---|
| lightness | 0–1 | % | Perceived lightness from 0 (black) to 1 (white). |
| chroma | number | Color intensity, from 0 (gray) to about 0.37. |
| hue | angle | The hue angle from 0 to 360. |
Examples
Different hues with the same lightness really look equally light:
<style>
div { padding: 8px; color: black; }
</style>
<div style="background: oklch(0.8 0.15 90);">oklch(0.8 0.15 90) — yellow</div>
<div style="background: oklch(0.8 0.15 150);">oklch(0.8 0.15 150) — green</div>
<div style="background: oklch(0.8 0.15 250);">oklch(0.8 0.15 250) — blue</div>Notes
OKLCH is convenient for palettes: change only the hue, and the contrast stays the same. It can also express colors outside sRGB for modern screens. Supported in all current browsers since 2023.
See also
- hsl() — A color by hue, saturation and lightness.
- color-mix() — Mixes two colors in the given proportion.
- color — The color of the text (and the default color of borders and SVG icons).
In the tutorial
- Modern colors — The oklch() function and why it makes palettes easy, mixing colors with color-mix() and the relative syntax oklch(from ...).