HEX, RGB, and HSL: Web Color Codes Explained

Open any stylesheet and you’ll find colors written three different ways: #4f46e5, rgb(79, 70, 229), and hsl(243, 75%, 59%). They can all describe the exact same color — they’re just three notations for the same thing. Knowing what each one means (and when to reach for which) makes working with color far less mysterious.

RGB: how screens actually make color

Screens create color by mixing three lights — Red, Green, and Blue. RGB notation gives each one a value from 0 to 255, where 0 is off and 255 is full brightness.

• rgb(255, 0, 0) — full red, no green or blue → pure red.
• rgb(0, 0, 0) — everything off → black.
• rgb(255, 255, 255) — everything full → white.

RGB is intuitive once you think in terms of light rather than paint (mixing all colors of light gives white, not black).

HEX: the same RGB, written compactly

A hex code is just RGB in a shorthand. The # is followed by three pairs of hexadecimal digits — two for red, two for green, two for blue — each pair representing 0–255 in base 16.

#4f46e5
  4f → 79   (red)
  46 → 70   (green)
  e5 → 229  (blue)
= rgb(79, 70, 229)

So #ff0000 is exactly rgb(255, 0, 0). Hex is popular because it’s compact and easy to copy from design tools. (You may also see a three-digit shorthand like #f00, where each digit is doubled — that’s the same as #ff0000.) The Color Converter translates between hex and RGB instantly.

HSL: the format designed for humans

HSL describes color the way a person naturally thinks about it, with three intuitive dials:

• Hue (0–360°) — the color itself, positioned on a color wheel. 0° is red, 120° is green, 240° is blue.
• Saturation (0–100%) — how vivid it is. 0% is gray; 100% is fully colorful.
• Lightness (0–100%) — how bright. 0% is black, 50% is the “true” color, 100% is white.

HSL’s superpower is making related colors easy. Want a darker version of a color? Lower the lightness and leave hue and saturation alone. Want a muted variant? Drop the saturation. Building a palette of tints and shades is far more predictable in HSL than by nudging hex digits blindly — which is why design systems often generate their color scales this way.

What about the alpha channel?

All three formats have a version with opacity: rgba(79, 70, 229, 0.5), hsla(243, 75%, 59%, 0.5), or an 8-digit hex #4f46e580. The final value — 0 (fully transparent) to 1 (fully opaque), or the last hex pair — controls how much of the background shows through. Modern CSS also accepts the alpha inside rgb() and hsl() directly.

Which format should you use?

• HEX — for copying a specific brand color or grabbing a value from a design tool.
• RGB — when you’re thinking in terms of screen light or generating colors in code.
• HSL — when you want to adjust a color or build a coherent palette of related shades.

The good news is you don’t have to commit — they’re interchangeable. Pick whatever makes the task at hand easiest, and use the Color Converter to jump between them whenever you need.