CSS Color Module Level 4

https://www.w3.org/TR/css-color-4/
Admin
CSS Color Module Level 4 specifies CSS color values, color spaces, gamut mapping, and opacity...
Tokens:67,084
Snippets:388
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### oklab() example color values

Source: https://www.w3.org/TR/css-color-4

Example oklab() color values. Lightness values below 0% or above 100% are clamped at parse time; a lightness of 0% or 100% displays as black or white due to gamut mapping. The a and b arguments are signed and may be percentages or numbers.

```css
 oklab(40.101% 0.1147 0.0453);
 oklab(59.686% 0.1009 0.1192);
 oklab(0.65125 -0.0320 0.1274);
 oklab(66.016% -0.1084 0.1114);
 oklab(72.322% -0.0465 -0.1150);
 oklab(42.1% 41% -25%)
```

--------------------------------

### oklch() example color values

Source: https://www.w3.org/TR/css-color-4

Example oklch() color values. If chroma is 0% or 0, the hue component is powerless; a lightness of 0% or 100% displays as black or white due to gamut mapping. Hue angles repeat every 360 degrees.

```css
 oklch(40.101% 0.12332 21.555);
 oklch(59.686% 0.15619 49.7694);
 oklch(0.65125 0.13138 104.097);
 oklch(0.66016 0.15546 134.231);
 oklch(72.322% 0.12403 247.996);
 oklch(42.1% 48.25% 328.4)
```

--------------------------------

### HTML and CSS: currentcolor resolution example

Source: https://www.w3.org/TR/css-color-4

Shows how currentcolor resolves in inherited properties. The used value of text-shadow on the first line fragment is yellowgreen.

```html
<div>
  <p>Assume this example text is long enough
    to wrap on multiple lines.
  </p>
</div>
```

```css
div {
  color:  forestgreen;
  text-shadow: currentColor;
}
p {
  color:  mediumseagreen;
}
p::firstline {
  color:  yellowgreen;
}
```

--------------------------------

### Equivalent explicit color value for currentcolor

Source: https://www.w3.org/TR/css-color-4

Equivalent to the previous example using currentcolor, explicitly setting background-color to red instead of using the keyword.

```css
.foo {
  color:  red;
  background-color:  red;
}

```

--------------------------------

### HTML: Using system colors in inline style

Source: https://www.w3.org/TR/css-color-4

Shows how a system color like MarkText is used in an inline style. The declared value for background-color is "mark".

```html
<mark style="color:  MarkText; background:  Mark">example</mark>
```

--------------------------------

### Convert OKLab to XYZ and OKLCH

Source: https://www.w3.org/TR/css-color-4

Functions for converting between OKLab and XYZ or OKLCH color spaces. OKLab_to_XYZ uses the D65 reference white and relies on a multiplyMatrices helper. OKLab_to_OKLCH returns [L, chroma, hue] and sets hue to NaN when chroma is near zero. OKLCH_to_OKLab converts hue in degrees to radians for the trigonometric calculations.

```javascript
function OKLab_to_XYZ(OKLab) {
	// Given OKLab, convert to XYZ relative to D65
	var LMStoXYZ =  [
		[  1.2268798758459243, -0.5578149944602171,  0.2813910456659647 ],
		[ -0.0405757452148008,  1.1122868032803170, -0.0717110580655164 ],
		[ -0.0763729366746601, -0.4214933324022432,  1.5869240198367816 ]
	];
	var OKLabtoLMS = [
		[ 1.0000000000000000,  0.3963377773761749,  0.2158037573099136 ],
		[ 1.0000000000000000, -0.1055613458156586, -0.0638541728258133 ],
		[ 1.0000000000000000, -0.0894841775298119, -1.2914855480194092 ]
    ];

	var LMSnl = multiplyMatrices(OKLabtoLMS, OKLab);
	return multiplyMatrices(LMStoXYZ, LMSnl.map(c => c ** 3));
}
```

```javascript
function OKLab_to_OKLCH(OKLab) {
	var epsilon = 0.000004;
	var hue = Math.atan2(OKLab[2], OKLab[1]) * 180 / Math.PI;
	var chroma = Math.sqrt(OKLab[1] ** 2 + OKLab[2] ** 2);
	if (hue < 0) {
		hue = hue + 360;
	}
	if (chroma <= epsilon) {
		hue = NaN;
	}
	return [
		OKLab[0], // L is still L
		chroma,
		hue
	];
}
```

```javascript
function OKLCH_to_OKLab(OKLCH) {
	return [
		OKLCH[0], // L is still L
		OKLCH[1] * Math.cos(OKLCH[2] * Math.PI / 180), // a
		OKLCH[1] * Math.sin(OKLCH[2] * Math.PI / 180)  // b
	];
}
```

--------------------------------

### Use currentcolor keyword for background-color

Source: https://www.w3.org/TR/css-color-4

Uses the currentcolor keyword to set the background-color to the same value as the color property on the same element. The example sets color to red and background-color to currentcolor, which resolves to red.

```css
.foo {
  color:  red;
  background-color:  currentcolor;
}

```

--------------------------------

### Color expressed in multiple color spaces with color()

Source: https://www.w3.org/TR/css-color-4

Shows the same color expressed in five different color spaces using the CSS color() function. The values are given as examples of how a color can be represented in sRGB, display-p3, a98-rgb, prophoto-rgb, and rec2020.

```css
 color(sRGB 0.41587 0.503670 0.36664);
 color(display-p3 0.43313 0.50108 0.37950);
 color(a98-rgb 0.44091 0.49971 0.37408);
 color(prophoto-rgb 0.36589 0.41717 0.31333);
 color(rec2020 0.6295 0.9657 0.3633);

```

--------------------------------

### oklab() functional notation grammar

Source: https://www.w3.org/TR/css-color-4

Grammar for the oklab() color function. The first argument is Oklab Lightness (0% to 100% or 0.0 to 1.0, clamped at parse time), the second and third are signed a and b axis distances (theoretically unbounded, practically within ±0.5), and an optional alpha component follows a slash. Percentages for a and b map -100% to -0.4 and 100% to 0.4.

```css
oklab() = oklab( [ <percentage> | <number> | none]
    [ <percentage> | <number> | none]
    [ <percentage> | <number> | none]
    [ / [<alpha-value> | none] ]? )
```

--------------------------------

### currentcolor default for text-emphasis-color

Source: https://www.w3.org/TR/css-color-4

Shows how the text-emphasis-color property defaults to currentcolor, so emphasis marks inherit the text color of each element. The example sets the paragraph text to black, the strong element to red, and applies dot emphasis to the em element, resulting in black emphasis marks over "Some" and "emphasized text" but red over "really".

```html
<p><em>Some <strong>really</strong> emphasized text.</em>
<style>
p { color: black; }
em { text-emphasis: dot; }
strong { color: red; }
</style>
```

--------------------------------

### hwbToRgb() conversion function

Source: https://www.w3.org/TR/css-color-4

JavaScript implementation of the HWB-to-sRGB conversion algorithm. It normalizes white and black so their sum is no larger than 100%, returns a gray when white+black >= 1, and otherwise converts via hslToRgb and adjusts the RGB components. Expects hue in degrees 0..360 and white/black in the reference range [0,100].

```javascript
/**
 * @param {number} hue -  Hue as degrees 0..360
 * @param {number} white -  Whiteness in reference range [0,100]
 * @param {number} black -  Blackness in reference range [0,100]
 * @return {number[]} Array of RGB components 0..1
 */
function hwbToRgb(hue, white, black) {
    white /= 100;
    black /= 100;
    if (white + black >= 1) {
        let gray = white / (white + black);
        return [gray, gray, gray];
    }
    let rgb = hslToRgb(hue, 100, 50);
    for (let i = 0; i < 3; i++) {
        rgb[i] *= (1 - white - black);
        rgb[i] += white;
    }
    return rgb;
}
```

--------------------------------

### Equivalent color notations for white in xyz-d50 and xyz-d65

Source: https://www.w3.org/TR/css-color-4

Shows equivalent color notations for white, including hex and color() with xyz-d50 and xyz-d65 spaces.

```css
#FFFFFF
color(xyz-d50 0.9643 1 0.8251)
color(xyz-d65 0.9505 1 1.089)
```

--------------------------------

### hwb() function syntax

Source: https://www.w3.org/TR/css-color-4

Defines the formal grammar of the hwb() color function. The first argument is the hue (same as hsl()), the second and third are whiteness and blackness percentages, and the optional fourth is an alpha value. Commas are not allowed; using them is an error.

```css
hwb() = hwb(
  [<hue> | none]
  [<percentage> | <number> | none]
  [<percentage> | <number> | none]
  [ / [<alpha-value> | none] ]? )
```
Tokens:
Raw