Every color on your screen can be described in multiple ways. HEX, RGB, and HSL all describe the same colors, but they think about color differently. Understanding when to use each saves time and makes design work more intuitive.

RGB: How Screens Think

RGB stands for Red, Green, Blue. Each channel ranges from 0 to 255.

  • rgb(255, 0, 0) = pure red
  • rgb(0, 255, 0) = pure green
  • rgb(0, 0, 255) = pure blue
  • rgb(255, 255, 255) = white (all channels maxed)
  • rgb(0, 0, 0) = black (all channels off)

RGB maps directly to how screens work: each pixel has red, green, and blue sub-pixels that combine to produce color. It’s the native language of displays.

Good for: programmatic color manipulation, understanding how display hardware works, working with image data.

Bad for: intuiting what a color looks like from its values. Quick: is rgb(180, 120, 60) warm or cool? Hard to tell without experience.

HEX: RGB in Disguise

HEX is just RGB written in hexadecimal. #FF0000 is rgb(255, 0, 0).

The six characters are three pairs: #RRGGBB. Each pair is a hex value from 00 (0) to FF (255).

  • #FF0000 = red (FF red, 00 green, 00 blue)
  • #00FF00 = green
  • #FFFFFF = white
  • #000000 = black

Shorthand: #F00 expands to #FF0000.

Good for: CSS (it’s the most common format), compact notation, copy-pasting between design tools and code.

Bad for: same as RGB, it’s hard to mentally manipulate. Want a slightly lighter version of #2563EB? Good luck doing that in your head.

HSL: How Humans Think

HSL stands for Hue, Saturation, Lightness.

  • Hue: the color itself, expressed as a degree on a color wheel (0-360). 0 = red, 120 = green, 240 = blue.
  • Saturation: how vivid the color is (0% = gray, 100% = full color).
  • Lightness: how light or dark (0% = black, 50% = pure color, 100% = white).

hsl(220, 83%, 53%) is a vivid blue. You can tell because:

  • 220 degrees is in the blue range
  • 83% saturation means it’s vivid
  • 53% lightness means it’s close to the pure color

Good for: designing color palettes, creating variations of a color, understanding color relationships.

Why HSL Is Great for Design

Want five shades of your brand blue?

In HEX, you’d need to look up or calculate each one:

  • #1E40AF, #2563EB, #3B82F6, #60A5FA, #93C5FD

In HSL, just change lightness:

  • hsl(220, 83%, 35%) - dark
  • hsl(220, 83%, 45%) - medium dark
  • hsl(220, 83%, 53%) - base
  • hsl(220, 83%, 65%) - medium light
  • hsl(220, 83%, 80%) - light

Same hue, same saturation, just sliding the lightness. Intuitive.

Want a muted version? Drop saturation. Want a complementary color? Add 180 to the hue.

When to Use Which

Format Use when
HEX Writing CSS, sharing colors, design specs
RGB Working with canvas, image processing, programmatic color generation
HSL Designing palettes, creating hover states, accessible color variations

Color Accessibility Tip

When choosing text and background colors, what matters is the lightness contrast. In HSL, this is immediately visible: if your background is hsl(220, 83%, 90%) and your text is hsl(220, 83%, 20%), the 70-point lightness gap tells you the contrast is strong.

WCAG requires a contrast ratio of at least 4.5:1 for normal text. Using HSL makes it much easier to intuitively maintain sufficient contrast.