Colours
CSS can describe colour in several ways: named keywords, hexadecimal codes, rgb(), hsl(), and the newer perceptual spaces oklch() and oklab(). This lesson covers each syntax, transparency, colour mixing and choosing colours with enough contrast.
Where colour is used
Named colours
CSS has about 150 named colours. They're handy for quick experiments, but real designs use exact values.
Hexadecimal
#rrggbb gives red, green and blue as pairs of hexadecimal digits from 00 to ff. Three-digit shorthand doubles each digit (#f0f = #ff00ff). An extra pair sets transparency: #1a5fb480 is about 50% opaque. Hex is the format designers copy from design tools.
rgb()
Each channel is 0–255. The modern syntax separates values with spaces and adds transparency after a slash. (The older comma form, rgba(214, 51, 108, 0.4), still works everywhere.)
hsl()
HSL describes colour the way people think about it: hue (an angle on the colour wheel, 0–360), saturation (grey to vivid) and lightness (black to white). Making a darker shade is as simple as lowering the lightness.
oklch(): perceptually even colour
oklch(lightness chroma hue) is designed so that equal lightness values look equally light. That makes building consistent palettes and accessible colour scales far easier, and it can express the more vivid colours of modern wide-gamut displays. It's supported in all current browsers.
Mixing and relative colours
color-mix() blends two colours; relative colour syntax (oklch(from …)) adjusts individual channels of an existing colour. Together with variables, they let a whole palette derive from one brand colour.
Opacity vs transparent colours
To make only a background see-through, use a transparent colour. opacity affects the element and everything inside it.
Contrast and accessibility
Text must contrast clearly with its background: WCAG asks for at least 4.5:1 for normal text and 3:1 for large text. Light grey on white is the most common failure. Browser developer tools show the ratio when you click a colour swatch, and suggest accessible alternatives. Also, never use colour as the only way to convey meaning — add text, icons or patterns.