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
is a<number>
between0
and1
or a<percentage>
between0%
and100%
, where the number0
corresponds to0%
(black) and the number1
corresponds to100%
(white).L
specifies the perceived lightness.C
is a<number>
or a<percentage>
, where0%
is0
and100%
is the number0.4
. It is a measure of the chroma (roughly representing the "amount of color"). Its minimum useful value is0
, while the maximum is theoretically unbounded (but in practice does not exceed0.5
).H
is a<number>
or a<angle>
that specifies the hue angle along the positive "a" axis (toward purplish red),90deg
points along the positive "b" axis (toward mustard yellow),180deg
points along the negative "a" axis (toward greenish cyan), and270deg
points along the negative "b" axis (toward sky blue).A
(alpha) can be a<number>
between0
and1
or a<percentage>
between0%
and100%
, where the number1
corresponds to100%
(full opacity).
Formal syntax
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.
<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>
[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.
<div id="background-div">
<div data-color="red"></div>
<div data-color="red-alpha"></div>
</div>
[data-color="red"] {
background-color: oklch(50% 130 20);
}
[data-color="red-alpha"] {
background-color: oklch(50% 130 20 / 0.4);
}
Specifications
Specification |
---|
CSS Color Module Level 4 # ok-lab |
Browser compatibility
BCD tables only load in the browser
See also
- The
<color>
data type 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()
andoklab()
colors.