Colors

<color>

Any colour. It can be a hex value, a named colour, transparent, currentcolor, a system colour, or a colour function: rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(), color-mix(), contrast-color() or light-dark().

<color-base> is the group of hex colours, colour functions, named colours, color-mix() and transparent. Every colour, however written, resolves to a colour in some colour space plus an alpha channel.

color: #1a1a2e;
background-color: oklch(95% 0.03 90);
border-color: color-mix(in oklab, currentcolor 30%, transparent);

<hex-color>

A colour written as # and hexadecimal digits: #rgb, #rgba, #rrggbb or #rrggbbaa. The short forms double each digit, so #f80 is #ff8800. Letters may be upper or lower case.

The fourth or last two digits are the alpha channel: #0008 and #00000080 are both half-transparent black. Hex colours are always in the sRGB colour space.

<named-color>

One of 148 colour keywords, all in the sRGB space and all fully opaque. Names are case-insensitive. Each gray name also has a grey spelling, and aqua/cyan and fuchsia/magenta are pairs with the same value.

transparent

A fully transparent colour, the same as rgb(0 0 0 / 0). It is the initial value of background-color.

Gradients interpolate in premultiplied alpha, so fading red to transparent stays red as it fades instead of passing through grey.

currentcolor

The element's own color value. It lets borders, shadows, SVG fills and other colours follow the text colour, including when the text colour changes on hover or in a different theme. It is often written currentColor; keywords are case-insensitive.

On the color property itself, currentcolor means the inherited value. On other properties it is inherited as the keyword, so a child that inherits a currentcolor value resolves it against its own color, not its parent's.

svg.icon { fill: currentcolor; }

<system-color>

Keywords for the colours the browser and operating system use for page backgrounds, text, links, buttons, form fields and selections. In forced colours mode, such as Windows High Contrast, these are the colours the user has chosen, so they are the safe choice for custom controls in that mode.

The older keywords in <deprecated-color>, such as ButtonHighlight, Window and ThreeDShadow, are still accepted but now map to one of the colours above. Use the current names instead.

@media (forced-colors: active) {
  .toggle[aria-pressed=true] { background: Highlight; color: HighlightText; }
}

<hue>

The hue angle in a polar colour function: where the colour sits around the colour wheel. A plain number is read as degrees, and values wrap, so 380 is the same as 20.

The same number names a different colour in each space: hue 0 is red in hsl() but a pinkish red in oklch().

<alpha-value>

The opacity of a colour, from fully transparent to fully opaque. A number runs from 0 to 1, a percentage from 0% to 100%; values outside the range are clamped.

background: rgb(0 0 0 / 50%);

<color-interpolation-method>

Chooses the colour space in which two colours are blended. The same two colours mix to quite different middles in different spaces: perceptual spaces such as oklab avoid the dull grey midpoints that sRGB can give.

background: linear-gradient(in oklch longer hue, red, red);
color: color-mix(in srgb, white 20%, navy);

<hue-interpolation-method>

When blending in a polar space, decides which way round the hue wheel to travel between the two hues. The default is shorter hue.