oklch()

Baseline 2023

Newly available

Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

css
/* Absolute values */
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)

/* Relative values */
oklch(from green l c h / 0.5)
oklch(from #0000FF calc(l + 0.1) c h)
oklch(from hsl(180 100% 50%) calc(l - 0.1) c h)

Values

Below are descriptions of the allowed values for both absolute and relative colors.

Absolute value syntax

oklch(L C H[ / A])

The parameters are as follows:

L

A <number> between 0 and 1, a <percentage> between 0% and 100%, or the keyword none (equivalent to 0% in this case). This value specifies the color's perceived lightness. In this case, the number 0 corresponds to 0% (black) and the number 1 corresponds to 100% (white).

C

A <number>, a <percentage>, or the keyword none (equivalent to 0% in this case). This value is a measure of the color's 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). In this case, 0% is 0 and 100% is the number 0.4.

H

A <number>, an <angle>, or the keyword none (equivalent to 0deg in this case) representing the color's <hue> angle.

Note: The angles corresponding to particular hues differ across the sRGB (used by hsl() and hwb()), CIELAB (used by lch()), and Oklab (used by oklch()) color spaces. See the <hue> reference page for more detail and examples.

A Optional

An <alpha-value> representing the alpha channel value of the color, where the number 0 corresponds to 0% (fully transparent) and 1 corresponds to 100% (fully opaque). Additionally, the keyword none can be used to explicitly specify no alpha channel. If the A channel value is not explicitly specified, it defaults to 100%. If included, the value is preceded by a slash (/).

Note: See Missing color components for more information on the effect of none.

Relative value syntax

oklch(from <color> L C H[ / A])

The parameters are as follows:

from <color>

The keyword from is always included when defining a relative color, followed by a <color> value representing the origin color: This is the original color that the relative color is based on. The origin color can be any valid <color> syntax, including another relative color.

L

A <number> between 0 and 1, a <percentage> between 0% and 100%, or the keyword none (equivalent to 0% in this case). This represents the lightness value of the output color. Here the number 0 corresponds to 0% (black) and the number 1 corresponds to 100% (white).

C

A <number>, a <percentage>, or the keyword none (equivalent to 0% in this case). This value represents the output color's chroma value (roughly representing the "amount of color"). Its minimum useful value is 0, while its maximum is theoretically unbounded (but in practice does not exceed 0.5). In this case, 0% is 0 and 100% is the number 0.4.

H

A <number>, an <angle>, or the keyword none (equivalent to 0deg in this case) representing the output color's <hue> angle.

A Optional

An <alpha-value> representing the alpha channel value of the output color, where the number 0 corresponds to 0% (fully transparent) and 1 corresponds to 100% (fully opaque). Additionally, the keyword none can be used to explicitly specify no alpha channel. If the A channel value is not explicitly specified, it defaults to the alpha channel value of the origin color. If included, the value is preceded by a slash (/).

Defining relative color output channel components

When using relative color syntax inside an oklch() function, the browser converts the origin color into an equivalent Oklch color (if it is not already specified as such). The color is defined as three distinct color channel values — l (lightness), c (chroma), and h (hue) — plus an alpha channel value (alpha). These channel values are made available inside the function to be used when defining the output color channel values:

  • The l channel value is resolved to a <number> between 0 and 1, inclusive.
  • The c channel value is resolved to a <number> between 0 and 0.4, inclusive.
  • The h channel value is resolved to a <number> between 0 and 360, inclusive.
  • The alpha channel is resolved to a <number> between 0 and 1, inclusive.

When defining a relative color, the different channels of the output color can be expressed in several different ways. Below, we'll study some examples to illustrate these.

In the first two examples below, we are using relative color syntax. However, the first one outputs the same color as the origin color and the second one outputs a color not based on the origin color at all. They don't really create relative colors! You'd be unlikely to ever use these in a real codebase, and would probably just use an absolute color value instead. We included these examples as a starting point for learning about relative oklch() syntax.

Let's start with an origin color of hsl(0 100% 50%) (equivalent to red). The following function outputs the same color as the origin color — it uses the origin color's l, c, and h channel values (0.627966, 0.257704, and 29.2346) as the output channel values:

css
oklch(from hsl(0 100% 50%) l c h)

This function's output color is oklch(0.627966 0.257704 29.2346).

The next function uses absolute values for the output color's channel values, outputting a completely different color not based on the origin color:

css
oklch(from hsl(0 100% 50%) 42.1% 0.25 328.363)

In the above case, the output color is oklch(0.421 0.25 328.363).

The following function creates a relative color based on the origin color:

css
oklch(from hsl(0 100% 50%) 0.8 0.4 h)

This example:

  • Converts the hsl() origin color to an equivalent oklch() color — oklch(0.627966 0.257704 29.2346).
  • Sets the H channel value for the output color to that of the origin oklch() equivalent's H channel value — 29.2346.
  • Sets the output color's L and C channel values to new values not based on the origin color: 0.8 and 0.4 respectively.

The final output color is oklch(0.8 0.4 29.2346).

Note: As mentioned above, if the output color is using a different color model to the origin color, the origin color is converted to the same model as the output color in the background so that it can be represented in a way that is compatible (i.e. using the same channels).

In the examples we've seen so far in this section, the alpha channels have not been explicitly specified for either the origin or output colors. When the output color alpha channel is not specified, it defaults to the same value as the origin color alpha channel. When the origin color alpha channel is not specified (and it is not a relative color), it defaults to 1. Therefore, the origin and output alpha channel values are 1 for the above examples.

Let's look at some examples that specify origin and output alpha channel values. The first one specifies the output alpha channel value as being the same as the origin alpha channel value, whereas the second one specifies a different output alpha channel value, unrelated to the origin alpha channel value.

css
oklch(from hsl(0 100% 50% / 0.8) l c h / alpha)
/* Computed output color: oklch(0.627966 0.257704 29.2346 / 0.8) */

oklch(from hsl(0 100% 50% / 0.8) l c h / 0.5)
/* Computed output color: oklch(0.627966 0.257704 29.2346 / 0.5) */

In the following example, the hsl() origin color is again converted to the oklch() equivalent — oklch(0.627966 0.257704 29.2346). calc() calculations are applied to the L, C, H, and A values, resulting in an output color of oklch(0.827966 0.357704 9.23462 / 0.9):

css
oklch(from hsl(0 100% 50%) calc(l + 0.2) calc(c + 0.1) calc(h - 20) / calc(alpha - 0.1))

Note: Because the origin color channel values are resolved to <number> values, you have to add numbers to them when using them in calculations, even in cases where a channel would normally accept <percentage>, <angle>, or other value types. Adding a <percentage> to a <number>, for example, doesn't work.

Formal syntax

<oklch()> = 
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<hue> =
<number> |
<angle>

<alpha-value> =
<number> |
<percentage>

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

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

css
[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(50% 0.4 30);
}
[data-color="red-chroma"] {
  background-color: oklch(50% 0.3 30);
}

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

Result

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

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

CSS

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

Result

Using relative colors with oklch()

This example styles three <div> elements with different background colors. The middle one is given the unmodified --base-color, while the left and right ones are given lightened and darkened variants of that --base-color.

These variants are defined using relative colors — the --base-color custom property is passed into an oklch() function, and the output colors have their lightness channel modified to achieve the desired effect via a calc() function. The lightened color has 0.15 (15%) added to the lightness channel, and the darkened color has 0.15 (15%) subtracted from the lightness channel.

CSS

css
:root {
  --base-color: orange;
}

#one {
  background-color: oklch(from var(--base-color) calc(l + 0.15) c h);
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: oklch(from var(--base-color) calc(l - 0.15) c h);
}

Result

The output is as follows:

Specifications

Specification
CSS Color Module Level 5
# relative-Oklch
CSS Color Module Level 4
# ok-lab

Browser compatibility

BCD tables only load in the browser

See also