HEX vs RGB vs HSL: A Complete Guide to CSS Color Formats

CSS offers multiple ways to specify colors, and choosing the right format can make your stylesheets more readable, maintainable, and efficient. The three most common formats — HEX, RGB, and HSL — each have distinct strengths. This guide explains how each works, when to use them, and how to convert between them.

HEX Colors: The Classic

HEX colors are the most widely used format in CSS and design tools. A HEX color code is a six-character string preceded by a hash symbol, where each pair of characters represents the red, green, and blue channels in hexadecimal (base-16) notation.

/* Full 6-digit HEX */
color: #ec4899;

/* 3-digit shorthand (when each pair is identical) */
color: #f0f;    /* equivalent to #ff00ff */

/* 8-digit HEX with alpha (transparency) */
color: #ec489980;   /* 50% opacity */

When to use HEX: HEX is ideal for design tokens, style guides, and any context where you need a compact, universally recognized color value. Every design tool (Figma, Sketch, Photoshop) exports HEX by default. It's also the most common format in existing codebases.

Limitation: HEX values are not intuitive to read. Can you tell what color #7c3aed is without a tool? Probably not. That's where RGB and HSL come in.

RGB Colors: Direct Channel Control

RGB specifies colors by their red, green, and blue channel values, each ranging from 0 to 255. It's the format closest to how screens actually display color — by mixing light from red, green, and blue sub-pixels.

/* Standard RGB */
color: rgb(236, 72, 153);

/* Modern syntax (CSS Color Level 4, no commas) */
color: rgb(236 72 153);

/* With alpha (transparency) */
color: rgb(236 72 153 / 0.5);

/* Legacy rgba() — still works but modern syntax preferred */
color: rgba(236, 72, 153, 0.5);

When to use RGB: RGB is useful when you need to programmatically manipulate individual color channels — for example, in JavaScript canvas operations, image processing, or when interpolating between colors. It's also more readable than HEX since the values are in familiar decimal notation.

Limitation: RGB doesn't map well to human color perception. If you have rgb(236, 72, 153) and want a "lighter version," which values do you change? All three? By how much? This is where HSL shines.

HSL Colors: Human-Friendly

HSL stands for Hue, Saturation, and Lightness. It models colors the way humans naturally think about them: "I want a blue (hue 240°) that's very vivid (saturation 100%) and medium brightness (lightness 50%)."

/* Standard HSL */
color: hsl(330, 81%, 60%);

/* Modern syntax */
color: hsl(330 81% 60%);

/* With alpha */
color: hsl(330 81% 60% / 0.5);

/* The power of HSL: creating color variations */
--primary: hsl(330, 81%, 60%);
--primary-light: hsl(330, 81%, 80%);   /* same hue, lighter */
--primary-dark: hsl(330, 81%, 40%);    /* same hue, darker */
--primary-muted: hsl(330, 30%, 60%);   /* same hue, less saturated */

When to use HSL: HSL is the best format for creating color systems. When building a design system, you can define a base hue and generate an entire palette by varying saturation and lightness. It's also the most intuitive format for CSS custom properties (variables) because adjustments are meaningful: change lightness to get lighter/darker, change saturation to get more/less vivid.

Limitation: HSL's lightness isn't perceptually uniform. A yellow at 50% lightness looks much brighter than a blue at 50% lightness because human eyes perceive these hues differently. This is the problem that OKLCH solves.

Quick Comparison Table

How to Convert Between Formats

The fastest way to convert between HEX, RGB, and HSL is to use an online tool like ColorSwitch. Type or paste a color in any format, and all other formats update instantly with one-click copy buttons for CSS values.

For programmatic conversion in JavaScript, here's a quick HEX to RGB function:

function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}

hexToRgb('#ec4899'); // { r: 236, g: 72, b: 153 }

The Future: OKLCH

If you're starting a new project in 2026, consider using OKLCH as your primary color format. It solves HSL's perceptual uniformity problem and is supported in all modern browsers. Check out our article on OKLCH: The Future of CSS Colors for a deep dive.

Conclusion

There's no single "best" color format — each has its place. Use HEX for design tokens and compact notation, RGB for programmatic channel manipulation, HSL for building intuitive color systems, and OKLCH for perceptually accurate color work. The key is understanding what each format offers so you can choose the right one for each situation.