Color Theory for Web Designers: HEX, RGB, and HSL Explained

Every color on your screen is just a combination of numbers. Understanding how those numbers work — and which color model to use when — is essential for any web designer or frontend developer.

This guide covers the three color models you'll use daily: HEX, RGB, and HSL.

How Screens Display Color

Computer screens use additive color mixing with three primary colors: Red, Green, and Blue. Each pixel on your screen has these three color channels, and by varying their intensity from 0 to 255, you can create over 16 million different colors (256 × 256 × 256 = 16,777,216).

All three web color models — HEX, RGB, and HSL — represent the same colors. They're just different ways of writing the same values.

HEX Colors

HEX (hexadecimal) colors are the most common format in web design. They represent each color channel as a two-digit hexadecimal number.

Format

#RRGGBB

Where RR, GG, and BB are hexadecimal values (00-FF) for red, green, and blue.

Examples

.red    { color: #FF0000; }  /* Pure red */
.green  { color: #00FF00; }  /* Pure green */
.blue   { color: #0000FF; }  /* Pure blue */
.white  { color: #FFFFFF; }  /* All channels max */
.black  { color: #000000; }  /* All channels zero */
.gray   { color: #808080; }  /* Equal channels = gray */

Shorthand

When both digits in each pair are the same, you can use shorthand:

#FF6600 → #F60
#AABBCC → #ABC
#000000 → #000

HEX with Alpha (Transparency)

Add two more digits for opacity:

.semi-transparent {
  color: #FF000080; /* Red at 50% opacity */
}

00 = fully transparent, FF = fully opaque.

When to Use HEX

• Design specs from Figma, Sketch, Adobe XD (they default to HEX)
• Quick color values where you know the code
• Legacy code and broad compatibility

RGB Colors

RGB (Red, Green, Blue) uses decimal numbers (0-255) for each channel. It's more human-readable than HEX since you can see the individual channel values.

Format

rgb(red, green, blue)
rgba(red, green, blue, alpha)

Examples

.red   { color: rgb(255, 0, 0); }
.green { color: rgb(0, 255, 0); }
.blue  { color: rgb(0, 0, 255); }
.coral { color: rgb(255, 127, 80); }

RGB with Alpha

.overlay {
  background: rgba(0, 0, 0, 0.5); /* Black at 50% opacity */
}

The alpha value ranges from 0 (transparent) to 1 (opaque).

Modern CSS Syntax

CSS Color Level 4 introduced a space-separated syntax:

.modern {
  color: rgb(255 127 80);
  color: rgb(255 127 80 / 0.5); /* With alpha */
}

When to Use RGB

• When you need to manipulate individual color channels programmatically
• When working with alpha transparency
• JavaScript color manipulation (canvas, dynamic styling)

HSL Colors

HSL (Hue, Saturation, Lightness) is the most intuitive color model for humans. Instead of thinking in abstract channel values, you think in terms of:

1. Hue — the color itself (0-360 degrees on the color wheel)
2. Saturation — how vivid the color is (0% = gray, 100% = full color)
3. Lightness — how bright the color is (0% = black, 50% = normal, 100% = white)

The Color Wheel

0°/360° = Red
60°     = Yellow
120°    = Green
180°    = Cyan
240°    = Blue
300°    = Magenta

Format

hsl(hue, saturation, lightness)
hsla(hue, saturation, lightness, alpha)

Examples

.red    { color: hsl(0, 100%, 50%); }
.green  { color: hsl(120, 100%, 50%); }
.blue   { color: hsl(240, 100%, 50%); }
.coral  { color: hsl(16, 100%, 66%); }

Why HSL Is Great for Design Systems

HSL makes it easy to create consistent color variations:

:root {
  /* Base brand color */
  --brand-hue: 220;

  /* Variations by changing lightness */
  --brand-50:  hsl(var(--brand-hue), 80%, 95%);
  --brand-100: hsl(var(--brand-hue), 80%, 90%);
  --brand-200: hsl(var(--brand-hue), 80%, 80%);
  --brand-300: hsl(var(--brand-hue), 80%, 70%);
  --brand-400: hsl(var(--brand-hue), 80%, 60%);
  --brand-500: hsl(var(--brand-hue), 80%, 50%);
  --brand-600: hsl(var(--brand-hue), 80%, 40%);
  --brand-700: hsl(var(--brand-hue), 80%, 30%);
  --brand-800: hsl(var(--brand-hue), 80%, 20%);
  --brand-900: hsl(var(--brand-hue), 80%, 10%);
}

Change one value (the hue) and your entire color palette updates.

Creating Color States

.button {
  background: hsl(220, 80%, 50%);
}
.button:hover {
  background: hsl(220, 80%, 45%); /* 5% darker */
}
.button:active {
  background: hsl(220, 80%, 40%); /* 10% darker */
}
.button:disabled {
  background: hsl(220, 20%, 70%); /* Desaturated and lighter */
}

When to Use HSL

• Building design systems and color palettes
• Creating hover/active/disabled state variations
• Dark mode implementations
• When you need to "think in colors" rather than numbers

Dark Mode with HSL

HSL makes dark mode implementation straightforward:

:root {
  --bg: hsl(220, 20%, 98%);     /* Light background */
  --text: hsl(220, 20%, 10%);   /* Dark text */
  --card: hsl(220, 20%, 100%);  /* White card */
}

.dark {
  --bg: hsl(220, 20%, 8%);      /* Dark background */
  --text: hsl(220, 20%, 90%);   /* Light text */
  --card: hsl(220, 20%, 12%);   /* Dark card */
}

Notice how the hue (220) and saturation (20%) stay the same — only lightness flips.

Converting Between Formats

Converting manually between HEX, RGB, and HSL involves math that's tedious to do by hand. Our Color Converter handles all conversions instantly:

• HEX → RGB → HSL → CMYK
• Enter any format, get all others
• Visual preview with the converted color
• Copy-ready CSS values

Choosing the Right Format

Accessibility: Color Contrast

Regardless of which format you use, ensure sufficient contrast between text and background colors:

• WCAG AA: minimum 4.5:1 contrast ratio for normal text
• WCAG AAA: minimum 7:1 contrast ratio for normal text
• Large text (18px+ bold or 24px+): minimum 3:1 contrast ratio

Wrapping Up

HEX is the default for most situations, RGB is best for programmatic manipulation, and HSL is ideal for building design systems and creating consistent color palettes. Understanding all three gives you the flexibility to choose the right tool for each situation.

Convert between any color format instantly with our free Color Converter.