CSS Function
oklab()
The oklab() function defines colors in the Oklab perceptual color space using lightness and two chromaticity axes.
Syntax
oklab(L a b / alpha)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| L | number | percentage | Yes | Lightness, from 0 (black) to 1 (white) |
| a | number | Yes | Green-red axis, roughly -0.4 to 0.4 |
| b | number | Yes | Blue-yellow axis, roughly -0.4 to 0.4 |
| alpha | number | percentage | No | Opacity, from 0 to 1 |
Examples
Vibrant blue
A vivid blue in Oklab.
css
color: oklab(0.45 -0.03 -0.31);Light pink
A soft light pink.
css
background: oklab(0.85 0.05 0.01);Tailwind usage
Oklab in a Tailwind arbitrary value.
html
<div class="bg-[oklab(0.85_0.05_0.01)]">Pink</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-[oklab(0.85_0.05_0.01)]Frequently Asked Questions
How does oklab differ from lab?▼
Oklab fixes perceptual non-uniformities in CIE LAB, particularly in blue hues. It provides more consistent lightness and chroma perception.
When should I choose oklab over oklch?▼
Use oklab when working with color math (mixing, interpolation). Use oklch when you want intuitive hue and chroma controls.
Explore CSS Color Tools
Try our free tools to work with oklab() and other CSS color functions.
Open Tools