CSS Function
oklch()
The oklch() function defines colors in the OKLCH color space using lightness, chroma, and hue.
Syntax
oklch(L C H / alpha)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| L | number | percentage | Yes | Lightness, from 0 (black) to 1 (white) |
| C | number | Yes | Chroma (color intensity), typically 0 to 0.4 |
| H | number | angle | Yes | Hue angle in degrees (0-360) |
| alpha | number | percentage | No | Opacity, from 0 (transparent) to 1 (opaque) |
Examples
Basic oklch color
A medium-lightness teal color.
css
color: oklch(0.7 0.15 200);With alpha
Semi-transparent green.
css
background: oklch(0.8 0.1 150 / 0.5);In Tailwind arbitrary value
Using oklch in Tailwind CSS v3/v4.
html
<div class="bg-[oklch(0.7_0.15_200)]">Content</div>Browser Support
✓
Chrome
v111++
✓
Firefox
v113++
✓
Safari
v15.4++
✓
Edge
v111++
✓
Opera
v97++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
Use arbitrary values: bg-[oklch(0.7_0.15_200)] or define in tailwind.config.jsFrequently Asked Questions
Why use oklch over hsl?▼
OKLCH is perceptually uniform - equal numeric changes produce equal visual changes. HSL distorts perceived brightness across different hues.
What is a typical chroma range?▼
Chroma in OKLCH typically ranges from 0 (gray) to about 0.4 (most vivid). Values vary by hue; some hues max out around 0.32.
Explore CSS Color Tools
Try our free tools to work with oklch() and other CSS color functions.
Open Tools