Understanding Color Spaces: HEX, RGB, HSL

How Computers Represent Color

Every color you see on a screen is produced by mixing red, green, and blue light at different intensities. Your monitor contains millions of tiny pixels, each with three sub-pixels (red, green, blue) that can emit light at varying brightness levels. When all three are at full intensity, you see white. When all are off, you see black. Every other color is some combination in between.

A color space is a system for organizing and representing colors numerically. Different color spaces emphasize different aspects of color — some map directly to hardware (RGB), some are convenient for compact notation (HEX), and others align with human perception (HSL). Understanding each one helps you make better decisions when designing and coding interfaces.

HEX: The Compact Notation

HEX (hexadecimal) color codes are the format you've likely seen most often in CSS: #FF5733. This is actually RGB values written in base-16. The six characters break into three pairs: the first two represent red, the middle two green, and the last two blue.

Hexadecimal uses digits 0–9 and letters A–F, giving 16 possible values per digit. Two hex digits together yield 16 × 16 = 256 possible values (0–255), which maps perfectly to one byte of data. So #FF5733 means red=255, green=87, blue=51.

Shorthand HEX uses three characters when each pair has identical digits: #FFF expands to #FFFFFF (white), and #09C expands to #0099CC. You can also add two more characters for alpha (opacity): #FF573380 gives roughly 50% opacity.

RGB: Direct Hardware Mapping

The RGB color model specifies colors as three intensity values for red, green, and blue channels. In CSS, you write it as rgb(255, 87, 51). Each channel ranges from 0 (no light) to 255 (full intensity). This model directly corresponds to how displays physically produce color.

RGB is an additive color model — you're adding light together. This is the opposite of paint mixing (subtractive color). In additive mixing, red + green = yellow, red + blue = magenta, green + blue = cyan, and all three together = white. This can be counterintuitive if you're thinking in terms of physical pigments.

Modern CSS also supports rgb(255 87 51 / 0.5) syntax with a slash-separated alpha value. The newer syntax drops commas and is the current recommended format in the CSS Color Level 4 specification.

HSL: Human-Friendly Color

HSL stands for Hue, Saturation, and Lightness. Unlike RGB which describes how hardware mixes light, HSL describes color the way humans think about it. This makes it dramatically easier to work with when you need to create color variations or build palettes.

• Hue (0–360°): The position on the color wheel. 0° is red, 120° is green, 240° is blue. Think of it as "what color is it?"
• Saturation (0–100%): How vivid the color is. 100% is fully saturated (pure color), 0% is completely desaturated (gray). Think "how much color?"
• Lightness (0–100%): How bright the color is. 0% is always black, 100% is always white, 50% gives the pure hue. Think "how much light?"

The power of HSL becomes obvious when creating color systems. Want a darker version of your brand blue? Keep the hue and saturation, reduce lightness. Want a muted pastel? Keep the hue, reduce saturation, increase lightness. These operations are intuitive in HSL but require complex math in RGB.

When to Use Each Format

Each format has strengths. HEX is compact and universally supported — ideal for design tokens and quick color references. RGB maps directly to display hardware and is what browsers ultimately compute — useful when you need programmatic channel manipulation. HSL aligns with human perception — perfect for building color palettes, creating hover states, or generating accessible color ramps.

In practice, most design systems define colors in HSL (for easy variation) but may store final tokens as HEX (for compactness). When writing CSS custom properties for a theme, HSL makes it trivial to create light/dark variants by adjusting lightness values.

Color Accessibility

Understanding color spaces helps you build accessible interfaces. The Web Content Accessibility Guidelines (WCAG) require minimum contrast ratios between text and background: 4.5:1 for normal text and 3:1 for large text. Contrast is calculated using relative luminance, which is derived from RGB values with gamma correction.

Roughly 8% of men and 0.5% of women have some form of color vision deficiency. Never rely on color alone to convey information. HSL is helpful here — colors that differ only in hue (with similar saturation and lightness) may be indistinguishable to colorblind users. Ensuring sufficient lightness contrast between foreground and background helps all users.

Converting Between Formats

HEX to RGB is straightforward: parse each two-character pair as a base-16 number. #4A90D9 becomes R=74, G=144, B=217.

RGB to HSL requires more math. You normalize RGB values to 0–1, find the min and max channels, compute lightness as the average of min and max, saturation from the difference, and hue from which channel is dominant. The formulas are well-defined but tedious by hand — which is exactly why conversion tools exist.

HSL to RGB reverses this process through a chroma-based calculation. The key insight is that at 50% lightness you get the purest color, and as lightness moves toward 0% or 100%, you blend toward black or white respectively.

CSS Color Functions

Modern CSS offers powerful color functions beyond basic notation. The color-mix() function blends two colors in a specified color space. The oklch() and oklab() functions provide perceptually uniform color spaces where equal numerical changes produce equal perceived visual changes — something neither RGB nor HSL achieves perfectly.

Relative color syntax lets you derive new colors from existing ones: hsl(from var(--brand) h s calc(l - 20%)) creates a darker variant of your brand color. These tools make it possible to build entire dynamic color systems with minimal code.

Understanding the underlying color models gives you the vocabulary to use these tools effectively. Whether you're debugging why two colors that "should look similar" don't, or building a theme system that generates accessible palettes automatically, knowing how HEX, RGB, and HSL relate to each other is fundamental knowledge for anyone working with color on the web.