CSS · Layout and visual systems

What color formats does CSS support?

MediumcoloroklchaccessibilityUpdated Oct 2026

Short answer

CSS supports named colors, hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() and color(). Modern syntax supports alpha with a slash, and perceptual spaces make palette work more predictable.

Older formats are tied to sRGB. Newer formats such as oklch describe color perceptually, which makes it easier to keep lightness consistent across hues. Browsers also support relative color syntax for deriving one color from another.

css

:root {
  --ink: #1f2937;
  --brand: oklch(0.62 0.18 255);
  --muted: rgb(100 116 139 / 0.7);
}

.badge {
  color: hsl(210 40% 98%);
  background: var(--brand);
}

Formats at a glance

Hex: compact sRGB values, with optional alpha in #rrggbbaa
rgb() and hsl(): familiar sRGB syntax, now with space-separated values and slash alpha
hwb(): hue, whiteness and blackness
lab() and lch(): perceptual color spaces
oklab() and oklch(): perceptual spaces designed for better uniformity
color(): access to wider gamuts such as display-p3

A perceptually uniform space makes it easier to generate a palette where every step has similar visual weight. It does not guarantee contrast, so check foreground and background combinations with a contrast tool and test in both themes.

Some wide-gamut colors are not displayable on every screen. Browsers gamut-map them, but the result should still be checked on real devices rather than assumed from the design file.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

1What is the advantage of oklch over hsl?
2How do you add alpha in modern color syntax?
3What does color() enable?
4Does a perceptual color space guarantee contrast?

Say it in the interview

CSS supports hex, rgb, hsl, hwb, lab, lch, oklab, oklch and color. The newer perceptual spaces make palettes more predictable, especially when I want equal lightness across hues. Alpha can be written with a slash in modern syntax. A perceptual space does not guarantee accessible contrast, so I still check the actual foreground and background pair.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.

Start a free CSS interview Browse all questions

Formats at a glance

Follow-ups you should expect

Related questions

Now say it out loud.