HEX vs RGB vs HSL: Which Color Format Should You Use?

CSS gives you three ways to specify colors: HEX, RGB, and HSL. They all produce the same colors on screen, but they have very different syntax and very different use cases. Knowing when to use each one makes your CSS cleaner and more maintainable.

HEX colors

HEX (hexadecimal) is the most widely recognized color format. It uses six hexadecimal digits split into three pairs representing red, green, and blue:

color: #0071e3;
/*     ^^--^^ blue (e3 = 227)
       ^^---- green (71 = 113)
       ^----- red (00 = 0) */

A 3-digit shorthand exists when each pair repeats: #fff = #ffffff, #0f0 = #00ff00.

Best for: Design tokens, brand colors, copying from design tools (Figma exports HEX by default).

RGB colors

RGB specifies red, green, and blue as decimal values from 0 to 255:

color: rgb(0, 113, 227);
color: rgba(0, 113, 227, 0.8); /* with opacity */

In modern CSS, you can use rgb() for both opaque and transparent colors:

color: rgb(0 113 227);           /* modern syntax, no commas */
color: rgb(0 113 227 / 80%);     /* with opacity, modern syntax */

Best for: Dynamic colors calculated in JavaScript, when you need to manipulate color values mathematically, animation between colors.

HSL colors

HSL (Hue, Saturation, Lightness) is the most human-intuitive format:

• Hue: The color angle 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%=normal, 100%=white).

color: hsl(211, 100%, 45%);
color: hsl(211, 100%, 45%, 0.8); /* with opacity */

Best for: Generating color palettes, theming, hover/focus states, design systems.

Why HSL is underrated

HSL's real power is in programmatic color manipulation. Want a lighter version of a color? Just increase the lightness:

/* Base color */
--brand: hsl(211, 100%, 45%);

/* Automatic variations */
--brand-light: hsl(211, 100%, 65%);  /* just increase L */
--brand-dark:  hsl(211, 100%, 30%);  /* just decrease L */
--brand-muted: hsl(211, 40%, 45%);   /* decrease S for muted */
--brand-pale:  hsl(211, 100%, 95%);  /* very high L for backgrounds */

Try doing that predictably with HEX or RGB.

Conversion formulas

HEX to RGB: each pair of hex digits converts to a decimal number (0-255).

#0071e3
Red:   0x00 = 0
Green: 0x71 = 113
Blue:  0xe3 = 227
Result: rgb(0, 113, 227)

RGB to HEX: convert each decimal to two-digit hex.

rgb(255, 87, 51)
Red:   255 = 0xff
Green: 87  = 0x57
Blue:  51  = 0x33
Result: #ff5733

Which format should you use?

• HEX - design tokens, copying from Figma/Sketch, brand colors
• RGB/RGBA - when you need transparency or are setting colors from JavaScript
• HSL - design systems, generating color scales, theming, hover states

In practice, most professional projects use HEX for fixed colors and HSL for dynamic/programmatic colors. RGBA fills the gap for opacity.