CSS Color Values: From Keywords to Functions

Why it exists

To give developers flexible and powerful ways to specify colors in web design. Early web design used simple named colors. As design needs grew more sophisticated, CSS added more descriptive models like RGB for screens and HSL for more human-intuitive manipulation, plus modern spaces like LCH for perceptual uniformity.

The mental model

Think of CSS colors like ordering a coffee. You can use a simple name ('a latte'), which is like a keyword (blue). You can give a precise recipe ('1 shot espresso, 200ml steamed milk'), which is like RGB (rgb(196, 164, 132)). Or you can describe its properties ('milky, not too strong, warm-toned'), which is like HSL (hsl(28, 38%, 65%)). Each method defines a color, but they offer different levels of control and intuition.

How it works

CSS parses color values in several formats. Keywords are predefined names like red or aliceblue. Hexadecimal notation (#RRGGBB or #RGB) is a compact way to write RGB values. Functional notations define colors within a specific color space. The most common are rgb() for Red-Green-Blue, and hsl() for Hue-Saturation-Lightness. Many functions also accept an optional fourth value for alpha transparency, like rgb(255 0 153 / 0.8).

When to use it

Use keywords (green, tomato) for quick tests. Use hex codes (#ff6347) when you get exact values from a design tool like Figma. Use rgb() when working with values that map directly to screen pixels. Use hsl() or lch() when you need to programmatically create color variations, like generating lighter/darker shades for button hover states. Use currentColor to make an element's border or background match its text color without repeating the value.

When not to use it

Avoid relying solely on named colors for a complex design system, as they are limited and not descriptive. The main footgun is assuming a color will look identical everywhere; device displays vary widely in calibration and color profile support. Always test your color choices on a range of different screens and devices.

One canonical example

A button's design can use multiple color formats. The base background might be a hex code from a design spec: background-color: #336699;. The text color could be a simple keyword: color: white;. The button's border could then use currentColor to automatically match the text color: border: 2px solid currentColor;. On hover, you could use HSL to create a lighter shade of the background without hardcoding a new hex value: background-color: hsl(210, 50%, 45%);. This combines precision, convenience, and maintainability.