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

If you've ever worked with CSS or a graphics tool, you've encountered at least three different ways to write the same color: #3b82f6, rgb(59, 130, 246), and hsl(217, 91%, 60%). All three describe the same shade of blue — so why do multiple formats exist, and when should you use each one?

RGB: How Screens Mix Light

RGB (Red, Green, Blue) is the native language of digital screens. Every pixel on your monitor emits combinations of red, green, and blue light. When all three are at maximum, you see white. When all three are zero, you see black.

rgb(59, 130, 246)    /* Each channel: 0-255 */
rgba(59, 130, 246, 0.5)  /* With 50% opacity */

Range: 0–255 per channel → 256³ = 16.7 million possible colors

RGB is intuitive for thinking about light mixing (red + green = yellow), but not intuitive for designing. If you want a slightly darker version of a color in RGB, you have to adjust all three channels — there's no single "brightness" knob.

HEX: RGB in Hexadecimal

HEX is just RGB expressed in base-16 (hexadecimal), with a # prefix:

#3b82f6
  ^^    = 3b hex = 59 decimal  → Red channel
    ^^  = 82 hex = 130 decimal → Green channel
      ^^ = f6 hex = 246 decimal → Blue channel

Shorthand: #rgb where each digit is doubled — #f60 expands to #ff6600.

HEX is the most common format in web CSS and design tools because it's compact. It's the same information as RGB, just written differently.

color: #3b82f6;          /* Full 6-digit hex */
color: #fff;             /* Shorthand = #ffffff */
color: #3b82f680;        /* 8-digit hex: last two digits = opacity (80 hex = 50%) */

HSL: Designed for Humans

HSL (Hue, Saturation, Lightness) was designed to be intuitive. Instead of mixing light primaries, you describe color the way humans naturally think:

hsl(217, 91%, 60%)
    ^^^             = Hue: 0–360° on the color wheel (217° = blue-ish)
         ^^^        = Saturation: 0% (gray) to 100% (vivid)
              ^^^   = Lightness: 0% (black) to 100% (white)

The Hue wheel

Why designers prefer HSL

With HSL, design operations become trivial: - Darken a color: decrease lightness (60% → 45%) - Create a lighter tint: increase lightness (60% → 80%) - Desaturate to grey: decrease saturation (91% → 20%) - Find an analogous color: adjust hue by ±30° - Find a complementary color: add 180° to hue

CSS custom properties (variables) with HSL enable powerful design systems:

:root {
  --color-brand-h: 217;
  --color-brand-s: 91%;
  --color-brand-l: 60%;
  --color-brand: hsl(var(--color-brand-h), var(--color-brand-s), var(--color-brand-l));
  --color-brand-dark: hsl(var(--color-brand-h), var(--color-brand-s), 40%);
  --color-brand-light: hsl(var(--color-brand-h), var(--color-brand-s), 80%);
}

HSB / HSV: A Common Confusion

Design tools like Photoshop, Figma, and Illustrator use HSB (Hue, Saturation, Brightness) or HSV (Hue, Saturation, Value) — not HSL. Despite similar names, they're different:

In HSB, maximum Brightness gives you the pure vivid color. In HSL, maximum Lightness always gives white.

If you're copying values from Figma into CSS, you need to convert HSB → HSL. Our Color Converter handles this automatically.

OKLCH: The Modern Standard

OKLCH (Lightness, Chroma, Hue in the OKLab perceptual space) is the newest CSS color format (supported since 2023 in all major browsers):

oklch(60% 0.15 250)

OKLCH is perceptually uniform — equal numerical steps look like equal visual steps to the human eye, unlike HSL where a +10% lightness change looks very different depending on hue. It's also capable of expressing colors outside the sRGB gamut (important for HDR displays).

For most practical web work today, HSL is sufficient. OKLCH is worth learning for design systems that need to generate color palettes programmatically.

Converting Between Formats

HEX → RGB

Split into three pairs, convert each from hex to decimal: - #1a2b3c → R: 1a = 26, G: 2b = 43, B: 3c = 60 → rgb(26, 43, 60)

RGB → HSL (algorithm)

1. Normalize: r, g, b to 0–1 range (divide by 255)
2. Find max and min of r, g, b
3. Lightness L = (max + min) / 2
4. Saturation S = (max − min) / (1 − |2L − 1|) (if L ≠ 0 or 1)
5. Hue H depends on which channel is max

This is exactly why using a tool is faster. Convert now →

Practical Guide: Which Format to Use

Convert colors instantly: Color Converter →