HEX vs RGB vs HSL: Understanding Web Color Formats for CSS

HEX: The Most Common Format

Hexadecimal colour notation is the most widely used format in web development. It represents the red, green, and blue colour channels as three pairs of hexadecimal digits (base-16), each ranging from 00 (0 in decimal) to FF (255 in decimal).

The syntax is: #RRGGBB

• #ff0000 — pure red (R=255, G=0, B=0)
• #00ff00 — pure green (R=0, G=255, B=0)
• #0000ff — pure blue (R=0, G=0, B=255)
• #ffffff — white (all channels at max)
• #000000 — black (all channels at zero)

A shorthand notation exists when both digits in each pair are identical: #rgb. So #ff0000 becomes #f00, and #aabbcc becomes #abc. HEX also supports an 8-digit format for transparency: #RRGGBBAA where the last two digits control opacity.

HEX is compact and familiar to any web developer. Design tools like Figma and Adobe XD output hex values by default, which is why it dominates in design-to-code workflows. The downside is that hex values are not intuitively readable — it is hard to look at #6c5ce7 and immediately know it is a medium-lightness violet.

RGB: Red, Green, Blue

The rgb() function in CSS expresses colour using three decimal values for red, green, and blue, each from 0 to 255. The MDN rgb() documentation covers the full syntax.

Syntax: rgb(red, green, blue)

• rgb(255, 0, 0) — pure red
• rgb(108, 92, 231) — medium violet
• rgb(0, 0, 0) — black

RGB is more readable than HEX because decimal numbers are more intuitive than hexadecimal, but it still requires mental arithmetic to understand what colour a given triplet produces. Knowing that rgb(255, 165, 0) is orange requires familiarity with the colour model.

Modern CSS (Level 4) also allows the rgb() function to accept values as percentages (rgb(100%, 64%, 0%)), and uses a space-separated syntax without commas: rgb(255 165 0). Both are equivalent.

HSL: Hue, Saturation, Lightness

HSL is arguably the most human-friendly colour format for web development. Instead of mixing amounts of light primaries, it describes colour in terms we naturally understand: what colour is it (hue), how vivid is it (saturation), and how light or dark is it (lightness). The MDN hsl() documentation provides a comprehensive reference.

Syntax: hsl(hue, saturation%, lightness%)

• Hue: A degree value on the colour wheel from 0 to 360. Red is at 0°/360°, green at 120°, blue at 240°. Values in between produce the full spectrum: yellow (60°), cyan (180°), magenta (300°).
• Saturation: A percentage from 0% (fully grey, no colour) to 100% (fully vivid).
• Lightness: A percentage from 0% (black) to 100% (white), with 50% being the "pure" colour.

Example: hsl(249, 72%, 63%) — this is immediately interpretable as "a fairly vivid violet at medium lightness." Compare this to #6c5ce7 which tells you nothing without a colour picker.

HSL is particularly powerful for creating colour scales and design systems. To create a palette of lighter and darker tints of a brand colour, you simply adjust the lightness value while keeping hue and saturation constant — something that is non-trivial to do with HEX or RGB values.

RGBA and HSLA: Adding Transparency

Both RGB and HSL have alpha-channel variants: rgba() and hsla(). The alpha channel controls opacity from 0 (fully transparent) to 1 (fully opaque). Values in between produce semi-transparent colours — extremely useful for overlays, shadows, and glassmorphism effects.

/* Solid blue */
background: rgb(108, 92, 231);

/* 50% transparent blue */
background: rgba(108, 92, 231, 0.5);

/* Equivalent in HSLA */
background: hsla(249, 72%, 63%, 0.5);

Note that in CSS Color Level 4, the rgb() and hsl() functions themselves now accept an optional alpha value: rgb(108 92 231 / 0.5) and hsl(249 72% 63% / 50%). The rgba() and hsla() functions remain valid for backwards compatibility.

HEX also supports 8-digit transparency notation: #6c5ce780 (where 80 is hex for 128, approximately 50% opacity). This is less widely known but fully supported in all modern browsers.

When to Use Each Format

Situation	Recommended Format	Why
Copying from a design tool (Figma, Sketch)	HEX	Design tools output HEX by default
Brand colour specifications	HEX	Compact, shareable, industry standard
Transparency / overlays	RGBA or HSLA	Only formats supporting easy alpha control
Design systems & colour scales	HSL	Lightness axis is human-readable and adjustable
CSS custom properties (variables)	HSL	Most flexible for theming and dark mode
Reading code written by others	Any	Use ToolMasta's converter to switch formats instantly

CSS Custom Properties and Color Formats

CSS custom properties (variables) unlock the full potential of HSL. By storing hue, saturation, and lightness separately, you can build an entire theme that responds to a single variable change.

:root {
  --brand-hue: 249;
  --brand-sat: 72%;
  --brand-primary: hsl(var(--brand-hue), var(--brand-sat), 63%);
  --brand-light:   hsl(var(--brand-hue), var(--brand-sat), 90%);
  --brand-dark:    hsl(var(--brand-hue), var(--brand-sat), 30%);
}

/* Dark mode: shift to darker lightness values */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-primary: hsl(var(--brand-hue), var(--brand-sat), 70%);
  }
}

This approach makes it trivial to shift an entire product's colour palette by changing a single --brand-hue value. No other format makes this as elegant.

Browser Support

All three formats — HEX, RGB, and HSL — have universal browser support going back many years. RGBA and HSLA are equally well supported. The newer space-separated syntax (rgb(255 0 0)) and slash-alpha notation (rgb(255 0 0 / 0.5)) are supported in all modern browsers (Chrome, Firefox, Safari, Edge) but not Internet Explorer. The 8-digit HEX format (#RRGGBBAA) is also fully supported in modern browsers but not IE.

For practical purposes in 2024 and beyond, you can use any of these formats freely. If you need to support legacy IE (which reached end of life in 2022), stick to the traditional comma-separated rgb() syntax and avoid 8-digit hex.