Color

CSS provides many properties that take a <color> value to set different kind of colors [spec].

JavaScript can manipulate and convert colors with bitwise operators [medium.com/swlh].

Color Keywords

Named colors [spec].

System colors [spec, MDN].

transparent [spec].

currentColor can be used to refer to the selected element's text color [MDN, spec].

Color Space

A color space is a specific organization of colors. In combination with color profiling supported by various physical devices, it supports reproducible representations of color [Wikipedia].

Gamut (or color gamut) is a certain complete subset of colors. The most common usage refers to the subset of colors which can be accurately represented in a given circumstance, such as within a given color space or by a certain output device [Wikipedia]. Gamuts are often visualized with chromaticity diagrams [svgees.us].

There are a number of color spaces [Wikipedia]. Relevant for the Web are the following.

• CIE Lab (often referred to as "Lab") represents the entire range of color that humans can see [spec].
• CIE LCH [spec]
• Oklab [spec]
• Oklch [spec]
• sRGB [spec]
• sRGB-linear [spec]
• display-p3 [spec, webkit.org]
• a98-rgb [spec]
• prophoto-rgb [spec]
• rec2020 [spec]
• CIE XYZ [spec]

CSS Color Functions

There are multiple color functions to represent different color spaces [spec].

• rgb(): red, green, blue [MDN, caniuse]
• hsl(): hue, saturation, lightness [MDN, caniuse, blog.logrocket.com]
  • hsl() is not very useful for color systems as the perceived lightness of colors is not consistent[wildbit.com].
• hwb(): hue, whiteness, blackness [MDN, caniuse]
• color() [MDN, spec, caniuse]
• lab() [MDN]
• lch() [MDN, lea.verou.me]
• oklab() [MDN, caniuse]
• oklch() [MDN, caniuse, evilmartians.com, keithjgrant.com]

Color functions support custom properties, for example hsl(var(--h) var(--s) var(--l)) or rgb(var(--color) / 0.5). And you can use math functions for color adaptions, e.g. hsl(var(--h) var(--s) calc(var(--l) + 10%)).

rgba() [MDN] and hsla() [MDN] are old extensions of rgb() and hsl() to add an alpha channel. But the latter two have since been extended to support alpha channels themselves without the a postfix in CSS Colors level 4 [spec].

Relative Colors

An origin color can be modified into a new color using the relative color syntax. Each color channel can either be taken from the origin color, or overridden statically or by using math functions. An example could look like this: hsl(from var(--color) h s calc(l / 2)). [W3, chrome-dev, caniuse]

In order to support older or incompatible browsers, a compatibility plugin is necessary [csstools/postcss-plugins].