Color Formats Explained — HEX, RGB, and HSL Compared

Every color on your screen is ultimately a combination of red, green, and blue light. But we have multiple ways to express that combination. Understanding the differences helps you pick the right format for the job.

HEX — The Web Default

HEX is a compact representation of RGB values using hexadecimal notation. Each pair of characters represents the red, green, or blue channel as a value from 00 to FF (0–255 in decimal).

#FF5733
 ││││││
 ││││└└─ Blue:  0x33 = 51
 ││└└─── Green: 0x57 = 87
 └└───── Red:   0xFF = 255

Shorthand: #F00 expands to #FF0000. Eight-digit HEX adds alpha: #FF573380 is 50% transparent.

Use HEX when: writing CSS, sharing colors with designers, or storing colors as compact strings.

RGB — Direct Channel Control

RGB specifies each color channel as a number from 0 to 255. It maps directly to how screens produce color.

rgb(255, 87, 51)       /* opaque */
rgb(255 87 51 / 0.5)  /* 50% transparent (modern syntax) */
rgba(255, 87, 51, 0.5) /* 50% transparent (legacy syntax) */

Use RGB when: you need to manipulate individual color channels in code, or when working with APIs that expect separate R, G, B values.

HSL — Human-Friendly Color

HSL stands for Hue, Saturation, Lightness. It describes color the way humans think about it:

• Hue (0–360) — the color on the color wheel. 0 is red, 120 is green, 240 is blue.
• Saturation (0–100%) — how vivid the color is. 0% is gray, 100% is full color.
• Lightness (0–100%) — how bright. 0% is black, 50% is the pure color, 100% is white.

hsl(14, 100%, 60%)       /* opaque */
hsl(14 100% 60% / 0.5)  /* 50% transparent */

Use HSL when: building color palettes, creating hover/active states (just adjust lightness), or when you want to reason about color relationships.

Converting Between Formats

All three formats describe the same color space, so conversion is lossless (with minor rounding). In JavaScript:

// HEX to RGB
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 };
}

// Quick HSL trick in CSS: create color variations
// Base:   hsl(14, 100%, 60%)
// Darker: hsl(14, 100%, 45%)
// Lighter: hsl(14, 100%, 75%)
// Muted:  hsl(14, 50%, 60%)

Which Format for Which Situation?

• Design tokens / variables — HSL. Easy to create consistent palettes by varying one axis.
• CSS one-off colors — HEX. Compact and universally understood.
• Programmatic color manipulation — RGB or HSL depending on what you’re adjusting.
• Accessibility checks — RGB. Contrast ratio formulas use relative luminance, which is calculated from linear RGB values.

Alpha and Transparency

All three formats support alpha (opacity). The alpha channel ranges from 0 (fully transparent) to 1 (fully opaque):

• HEX: #FF573380 (last two digits, 00–FF)
• RGB: rgb(255 87 51 / 0.5)
• HSL: hsl(14 100% 60% / 0.5)

The modern CSS syntax (using / for alpha) works in all current browsers and is the recommended approach over the older rgba() and hsla() functions.

Related Tools

• Color Converter — convert between HEX, RGB, and HSL color formats
• Image Converter — convert images between JPEG, PNG, WebP, and other formats