Oklab

As explained in CSS in Depth, Second Edition

A perceptual color space designed to represent lightness and color components more uniformly than many device-oriented color spaces.

Oklab is a perceptual color space available in CSS through `oklab()`. It represents lightness and color components more uniformly than device-oriented color spaces. It is one of several ways to specify a color, alongside familiar `rgb()` and `hsl()` and newer notations such as `lab()` and `oklch()`. section 11.2.2

Browser support is the practical constraint. `oklab()` arrived with a group of newer color notations between late 2022 and mid-2023; as of mid-2024, a fallback in another notation may still be useful. Choose a notation with both the color you want and your audience’s browser support in mind. section 11.2.2

Figure 11.12 Comparison of equivalent color values

Compare equivalent color values expressed in different notations. section 11.2.2

How CSS in Depth, Second Edition covers it

How deep it goes

Identifies `oklab()` and its compatibility considerations, but does not give a worked Oklab value or channel-by-channel explanation.

Examples

Provides a figure comparing equivalent color values across notations, without an explicit `oklab()` value in the supplied evidence.

What it assumes

Introduces RGB and hexadecimal notation alongside newer options; requires no prior knowledge of Oklab channels.

What you can do after

Apply it via CSS `oklab()`, considering a fallback notation where browser support matters.

How it connects

Connects Oklab to CSS color spaces and the `rgb()`, `hsl()`, `lab()`, and `oklch()` notations.

liveBookmanning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.