Color Spaces Explained: HEX vs RGB vs HSL and When to Use Each

Every color displayed on a screen or printed on paper is described by a color model — a mathematical system that maps numbers to visual perception. Hex, RGB, and HSL are three notations for specifying colors in web development and design, each with distinct strengths. Understanding how hex vs rgb vs hsl color formats work, and when each one is the right choice, eliminates guesswork and produces more accessible, consistent results.

Hex Notation: Compact but Opaque

Hexadecimal color codes represent RGB values in base-16. The format #RRGGBB packs three channels — red, green, blue — into six characters, where each pair ranges from 00 (0) to FF (255). For example, #1A8FE3 breaks down to R=26, G=143, B=227.

CSS also supports shorthand (#RGB, which expands each digit: #3AF becomes #33AAFF) and 8-digit hex (#RRGGBBAA) for alpha transparency, where FF is fully opaque and 00 is fully transparent. The 8-digit variant is defined in the CSS Color Level 4 specification.

Hex is dominant in design tools and stylesheets because it is compact. Its weakness: adjusting brightness or saturation requires mentally decomposing the value into RGB channels and recalculating — not intuitive for human perception.

RGB: The Additive Color Model

The RGB model is based on additive color mixing. Screens emit light from red, green, and blue subpixels. When all three channels are at maximum intensity (255, 255, 255), the result is white. When all are zero, the result is black. This mirrors how human cone cells work — the eye has three types of color receptors peaking at roughly 564nm (red), 534nm (green), and 420nm (blue), as described in the CIE standard colorimetric system.

In CSS, rgb(26, 143, 227) is equivalent to #1A8FE3. The modern CSS syntax (Color Level 4) drops the commas: rgb(26 143 227 / 0.8) for 80% opacity. RGB is the native language of displays, which makes it the right format for programmatic color manipulation — blending two colors, for instance, is a linear interpolation across three channels.

HSL: Designed for Human Perception

HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0-360): 0 is red, 120 is green, 240 is blue. Saturation is a percentage from gray (0%) to full color (100%). Lightness runs from black (0%) through the pure color (50%) to white (100%).

This model maps more naturally to how designers think about color. To create a darker variant of a button color, reduce lightness by 10-15%. To create a muted background, drop saturation to 20-30%. These operations are trivial in HSL but require recalculating all three channels in RGB. Design systems like Tailwind CSS generate their color scales by systematically varying lightness and saturation.

HSL has a known limitation: perceptual non-uniformity. An HSL lightness of 50% does not produce the same perceived brightness across all hues. Yellow at hsl(60, 100%, 50%) appears significantly brighter than blue at hsl(240, 100%, 50%) despite identical lightness values.

OKLCH: The Perceptually Uniform Alternative

The CSS Color Level 4 specification introduced oklch(), a perceptually uniform color space created by Bjorn Ottosson in 2020. In OKLCH, equal numerical changes in lightness produce equal perceived changes — solving the core problem with HSL.

The syntax is oklch(70% 0.15 240) — lightness (0-100%), chroma (color intensity), and hue (0-360 degrees). Browser support reached 95%+ global coverage by late 2024. For design systems that need consistent perceived contrast across a palette, OKLCH is now the technically superior choice.

Color Accessibility: WCAG Contrast Requirements

Color format choice directly affects accessibility work. The WCAG 2.1 Success Criterion 1.4.3 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). The contrast ratio formula compares the relative luminance of two colors:

ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Relative luminance is calculated from linearized RGB values (applying gamma correction), not from raw RGB integers. This means contrast checking must happen in the RGB/sRGB space regardless of the format used for authoring.

The upcoming WCAG 3.0 draft proposes the APCA (Advanced Perceptual Contrast Algorithm), which accounts for font size, weight, and polarity (light text on dark vs dark text on light) — a significant improvement over the current single-ratio approach.

Print vs Screen: CMYK and Gamut Boundaries

RGB is an additive model for light-emitting displays. Print uses CMYK (Cyan, Magenta, Yellow, Key/Black), a subtractive model where inks absorb wavelengths from reflected light. The two gamuts do not overlap perfectly: vivid blues and greens achievable in sRGB often fall outside the CMYK gamut, while some deep magentas printable in CMYK cannot be displayed on a standard sRGB monitor.

The sRGB color space, defined in IEC 61966-2-1, covers roughly 35% of the visible spectrum. Display P3, used in modern Apple devices, covers about 25% more area than sRGB. Professional print workflows use ICC profiles to map colors between device-specific gamuts, a process called color management. When designing for both screen and print, start in sRGB and verify CMYK conversions before sending to press — unexpected color shifts in saturated tones are the most common source of print disappointment.

Choosing the Right Format

• Hex — best for static CSS values where brevity matters. Widely supported, universally understood by design and development tools.
• RGB — best for programmatic color manipulation, blending, and any calculation that feeds into luminance or contrast checks.
• HSL — best for creating color variations (hover states, palettes, theme generators) where adjusting brightness or saturation needs to be intuitive.
• OKLCH — best for perceptually uniform design systems where consistent lightness across hues is critical.

Need to convert between formats? The Color Converter translates between hex, RGB, HSL, and OKLCH instantly, with live preview and contrast ratio calculation against any background color.