Color Formats for the Web
CSS lets you specify the same color in several notations, and although they look very different they mostly describe the same underlying RGB color space your screen displays. HEX, `rgb()`, and `hsl()` are three ways of naming a point in that space, each with strengths for different tasks — copying a value from a design tool, tweaking transparency, or adjusting a shade by hand. Knowing how they relate lets you convert between them confidently and pick the format that makes a given change easiest. This guide walks through each notation, how alpha (opacity) fits in, and why HSL is often the most intuitive to work with.
1. HEX notation
A hexadecimal color is written as `#RRGGBB`, where each pair of hex digits is the 0–255 intensity of red, green, and blue — so `#FF0000` is pure red and `#000000` is black. Each pair ranges from `00` to `FF` (255 in decimal), giving 256 levels per channel. A three-digit shorthand like `#F00` expands by doubling each digit to `#FF0000`, which is handy for simple colors. HEX is compact and is the default output of most design tools, which is why it is the form you most often copy and paste.
2. RGB and RGBA
The `rgb()` function expresses the same three channels in decimal, as in `rgb(255, 0, 0)` for red, which maps directly onto HEX — each channel is just the decimal equivalent of a hex pair. This makes RGB easy to relate to HEX: `FF` is `255`, `80` is `128`, and so on. The `rgba()` form adds a fourth value, alpha, from `0` (fully transparent) to `1` (fully opaque), so `rgba(255, 0, 0, 0.5)` is half-transparent red. Modern CSS also accepts percentages and a space-separated syntax, but the channel-and-alpha model is the same.
3. HSL and HSLA
HSL describes a color by hue, saturation, and lightness instead of raw channels. Hue is an angle from `0` to `360` degrees around a color wheel (0 is red, 120 is green, 240 is blue), saturation is a percentage from grey to vivid, and lightness is a percentage from black through the color to white — so `hsl(0, 100%, 50%)` is pure red. The `hsla()` form adds the same `0`–`1` alpha channel as RGBA. This model maps far more closely to how people think about color than three independent light channels do.
4. Converting between them conceptually
HEX and RGB are two spellings of the identical value: convert by translating each channel between base 16 and base 10, so `#3366CC` is exactly `rgb(51, 102, 204)`. HSL describes the same final RGB color but reached through a different model, so converting to or from it involves a defined geometric calculation rather than a simple digit swap. In practice you let the browser or a tool do the HSL conversion, but the key idea is that all three notations land on the same point your display ultimately renders as red, green, and blue light. None of them can show a color outside that shared sRGB space.
5. How alpha works
Alpha controls opacity — how much of what is behind an element shows through — and is the optional last value in `rgba()` and `hsla()`, ranging from `0` (invisible) to `1` (solid). An eight-digit HEX (`#RRGGBBAA`) and four-digit shorthand (`#RGBA`) encode the same alpha as two hex digits, so `#FF000080` is roughly half-transparent red. Alpha is distinct from the CSS `opacity` property: alpha affects only that single color, whereas `opacity` fades the entire element including its children. Use a color’s alpha channel when you want a translucent background or border without dimming the content on top of it.
6. When HSL is easier to reason about
HSL shines when you want to adjust a color rather than just specify one. To make a shade lighter or darker you change only the lightness percentage; to mute it you lower saturation, all without touching the hue. This makes it straightforward to build a consistent palette — a set of tints and shades from one base color, or a row of swatches by stepping the hue — which is awkward to do by eye in HEX or RGB. For static colors copied from a design, HEX is fine, but for hand-tuning relationships between colors, HSL’s separate, meaningful dimensions are far more intuitive.