Color

rgb()

A colour from red, green and blue channels, each a number from 0 to 255 or a percentage, with an optional alpha after a slash. This is the same sRGB space that hex colours use.

The modern syntax is rgb( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ), with spaces between channels. The legacy syntax separates the channels with commas, takes an optional fourth alpha argument, and does not allow mixing numbers and percentages or none.

Relative colour syntax. Start the arguments with from and a colour, and that origin colour is converted to the function's space. Inside the function, the channel keywords (r, g, b and alpha here) stand for the origin's channel values, so you can keep them, replace them or change them with calc(). Every colour function on this page except light-dark(), contrast-color() and the three mix functions accepts the same from form with its own channel keywords.

color: rgb(30 144 255);
background: rgb(30 144 255 / 0.2);
border-color: rgb(from var(--brand) r g b / 50%);

rgba()

A legacy alias of rgb(). It accepts exactly the same arguments and gives the same result; it dates from when rgb() did not take an alpha value. New code can use rgb() throughout.

hsl()

An sRGB colour given as hue, saturation and lightness. The hue is an angle around the colour wheel (a plain number means degrees: 0 red, 120 green, 240 blue); saturation and lightness are percentages.

As with rgb(), the modern syntax separates the values with spaces and puts alpha after a slash; the legacy syntax uses commas. HSL lightness is not perceptual: a yellow and a blue with the same lightness look very different in brightness. Use oklch() when that matters.

hsla()

A legacy alias of hsl() with the same arguments and result.

hwb()

An sRGB colour given as a hue plus how much white and how much black to mix into it, which is close to how people pick colours from a palette.

lab()

A colour in the CIE Lab space: lightness from 0 to 100, then two axes, a (green to red) and b (blue to yellow). Lab can describe every visible colour, not just those inside sRGB.

lch()

The polar form of Lab: lightness, chroma (how colourful) and hue angle. Changing the hue keeps the lightness the same, which HSL does not.

oklab()

A colour in the OKLab space, a refinement of Lab whose lightness and hue stay more even across the whole range. Lightness runs from 0 to 1 (or 0% to 100%); a and b are roughly between -0.4 and 0.4.

oklch()

The polar form of OKLab: lightness from 0 to 1, chroma from 0 to about 0.4, and a hue angle. It is the most practical space for building palettes, because equal steps in lightness look like equal steps, whatever the hue.

In relative syntax the channel keywords are l, c, h and alpha. Adjusting l darkens or lightens a colour without shifting its hue, and rotating h gives harmonious companions.

--brand: oklch(62% 0.19 255);
--brand-dark: oklch(from var(--brand) calc(l - 0.15) c h);
--brand-muted: oklch(from var(--brand) l calc(c / 2) h);
--accent: oklch(from var(--brand) l c calc(h + 180));

color()

A colour in a named colour space: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, or the XYZ spaces xyz, xyz-d50 and xyz-d65. Use it to reach the wider gamuts of modern displays.

<colorspace-params> is the colour-space name followed by its three channel values, usually numbers from 0 to 1.

color: color(display-p3 1 0.2 0.1);

color-mix()

Mixes colours in a chosen colour space, with optional percentages for how much of each to use. The colour space after in changes the result: oklab and oklch usually give the most even blends.

<color-interpolation-method> is in followed by a colour space, and for polar spaces (hsl, hwb, lch, oklch) an optional shorter, longer, increasing or decreasing hue. Leaving out a percentage splits the remainder evenly.

background: color-mix(in oklch, var(--brand) 20%, white);
border-color: color-mix(in srgb, currentcolor 30%, transparent);

light-dark()

Picks the first value when the element's used colour scheme is light and the second when it is dark. It only switches when color-scheme allows both, for example color-scheme: light dark on the root.

The colour form is light-dark(<color>, <color>); the image form takes two images, either of which may be none.

:root { color-scheme: light dark; }
body { background: light-dark(#fff, #111); color: light-dark(#111, #eee); }

contrast-color()

Returns white or black, whichever contrasts more with the given colour. Use it for text on a background colour you do not control, such as a user-chosen tag colour.

Picking the higher-contrast of black and white does not guarantee the result meets accessibility contrast guidelines for every mid-tone background.

.tag { background: var(--tag); color: contrast-color(var(--tag)); }

alpha()

Takes a colour and changes only its alpha, keeping the colour in whatever space it was given. It is a short form of the relative colour syntax for the common case of making a colour more or less transparent.

box-shadow: 0 4px 12px alpha(from var(--brand) / 25%);

palette-mix()

Mixes two font palettes for colour fonts, for use in font-palette. It works like color-mix(), blending each pair of matching palette entries, and lets a transition move smoothly from one palette to another.

dynamic-range-limit-mix()

Mixes values of dynamic-range-limit by percentage, giving a limit on HDR brightness between those keywords. It also lets that limit be transitioned.