css types color oklch()

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).

Syntax

oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)

Values

Functional notation: oklch(L C H[ / A])

L

A <number>() between 0 and 1, a <percentage>() between 0% and 100%, or the keyword none, where the number 0 corresponds to 0% (black) and the number 1 corresponds to 100% (white). L specifies the perceived lightness.

C

A <number>(), a <percentage>(), or the keyword none, where 0% is 0 and 100% is the number 0.4. It is a measure of the chroma (roughly representing the "amount of color"). Its minimum useful value is 0, while the maximum is theoretically unbounded (but in practice does not exceed 0.5).

H

A <number>(), an <angle>(), or the keyword none, which represents the hue angle. More details on this type can be found on the <hue>() reference.

A Optional

An <alpha-value>() or the keyword none, where the number 1 corresponds to 100% (full opacity).

Examples

Adjusting the lightness, chroma, and hue of a color

The following example shows the effect of varying the L (lightness), C (chroma), and H (hue) values of the oklch() color function.

HTML

<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-chroma"></div>

<div data-color="green"></div>
<div data-color="green-hue"></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

[data-color="blue"] {
  background-color: oklch(60% 0.4 240);
}
[data-color="blue-light"] {
  background-color: oklch(90% 0.4 240);
}

[data-color="red"] {
  background-color: oklch(100% 0.4 30);
}
[data-color="red-chroma"] {
  background-color: oklch(100% 0.3 40);
}

[data-color="green"] {
  background-color: oklch(60% 0.57 161);
}
[data-color="green-hue"] {
  background-color: oklch(60% 0.57 181);
}

Adjusting the alpha value of a color

The following example shows the effect of varying the A (alpha) value of the oklch() color function. The red and red-alpha elements overlap the #background-div element to demonstrate the effect of opacity. Giving A a value of 0.4 makes the color 40% opaque.

HTML

<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: oklch(100% 0.57 217);
  width: 150px;
  height: 40px;
}

[data-color="red"] {
  background-color: oklch(50% 130 20);
}
[data-color="red-alpha"] {
  background-color: oklch(50% 130 20 / 0.4);
}

See also

• <color>(): For a list of all color notations
• A perceptual color space for image processing
• OKLCH in CSS
• Safari Technology Preview 137 release notes: includes oklch() and oklab() colors