Color Theory for Developers: HEX, RGB, HSL

Understanding color formats and theory helps you make better design decisions, build accessible interfaces, and communicate effectively with designers.

Color Formats

HEX

Six hexadecimal digits representing RGB: #FF6B35 = Red:255, Green:107, Blue:53.

Shorthand: #F63 = #FF6633

With alpha: #FF6B3580 (50% opacity)

RGB / RGBA

color: rgb(255, 107, 53);
color: rgba(255, 107, 53, 0.5);
/* Modern syntax */
color: rgb(255 107 53 / 0.5);

HSL / HSLA

Hue (0-360°), Saturation (0-100%), Lightness (0-100%):

color: hsl(20, 100%, 60%);
color: hsl(20 100% 60% / 0.5);

HSL is more intuitive for programmatic color manipulation — adjusting lightness or saturation is straightforward.

Color Relationships

Complementary Colors

Opposite on the color wheel (180° apart). High contrast, vibrant pairs.

Analogous Colors

Adjacent on the color wheel (within 30°). Harmonious, low contrast.

Triadic Colors

120° apart. Balanced and vibrant.

Generating Color Palettes

From a Base Color

Create a shade scale by adjusting lightness in HSL:

function generatePalette(hue, saturation) {
  const steps = [95, 90, 80, 70, 60, 50, 40, 30, 20, 10, 5];
  return steps.map(l => hsl(${hue}, ${saturation}%, ${l}%));
}

This is how Tailwind's color scales (50-950) work.

Accessibility: WCAG Contrast

Text must have sufficient contrast against its background:

| Level | Normal Text | Large Text |

|-------|-------------|------------|

| AA | 4.5:1 | 3:1 |

| AAA | 7:1 | 4.5:1 |

Calculating Contrast Ratio

function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

function contrastRatio(l1, l2) {
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

Dark Mode Colors

Don't just invert colors. Instead:

Use lower saturation (vibrant colors are harsh on dark backgrounds)

Increase lightness of text colors

Use subtle borders instead of shadows for elevation

Reduce pure white (#fff → #fafafa or lighter)

Try It

Use our Color Converter tool to convert between HEX, RGB, and HSL with Tailwind name lookup and WCAG contrast checking.

Conclusion

HSL is the most developer-friendly format for manipulation. HEX is best for static values. Always check WCAG contrast ratios. Use our Tailwind Palette Generator to create consistent color scales.