HEX, RGB, and HSL Explained Like You're Five

Updated on April 18, 2026

Let me tell you something that took me an embarrassingly long time to figure out. I used to copy color codes from design tools and paste them into CSS without the faintest clue what any of those numbers actually meant. #3A86FF? Sure, whatever. I'd paste it, hit save, and move on. It was only when I started doing serious design work that I realized I'd been flying blind — and once I actually understood what these color formats were saying, everything got so much easier.

So let's fix that right now. No jargon. No math degree required. By the end of this, you'll understand exactly what every digit in a color code is telling you.

First: Your Screen Is Made of Tiny Colored Lights

Before we get into formats, we need one foundational idea. Your screen doesn't mix paint. It mixes light — specifically red, green, and blue light. Every single pixel on your monitor is really three microscopic lights side by side: one red, one green, one blue. By making each of those lights brighter or dimmer, your screen can produce millions of different colors.

That's it. That's the secret. Everything else we're about to talk about is just different ways of describing how much red, how much green, and how much blue to use.

RGB: The Most Honest Color Format

RGB is the most direct way to describe a screen color because it maps exactly to those three little lights. It looks like this:

rgb(255, 100, 50)

Those three numbers are always in the same order: Red, Green, Blue. Each one goes from 0 (light is completely off) to 255 (light is blasting at full power).

So rgb(255, 0, 0) is pure, screaming red — red all the way up, green and blue completely off. rgb(0, 0, 0) is black because all three lights are off. rgb(255, 255, 255) is white because all three are maxed out. And rgb(128, 128, 128) is a medium gray because all three are exactly halfway.

Why 255? Because computers store each value in 8 bits, and 8 bits can hold numbers from 0 to 255. That's 256 possible levels per channel, giving you 256 × 256 × 256 = over 16 million possible colors total. Your eyes can barely distinguish that many, so it's plenty.

When should you use RGB? When you're writing CSS and you want something human-readable, especially when you need to do math — like making a color slightly darker by reducing all three values, or adding transparency with rgba(255, 100, 50, 0.5).

HEX: The Same Thing, But Shorter (and Weirder Looking)

HEX is not a different color system. It's just RGB written in a different number system — specifically hexadecimal, which is base 16 instead of base 10.

In normal decimal counting (base 10), we have digits 0 through 9. In hexadecimal, we have 0 through 9 and then A through F, where A=10, B=11, C=12, D=13, E=14, F=15. So instead of needing three digits to write "255" in decimal, we only need two: "FF" (15×16 + 15 = 255).

A HEX color code like #3A86FF is just three pairs of hex digits:

  • 3A = the red value (3×16 + 10 = 58 out of 255)
  • 86 = the green value (8×16 + 6 = 134 out of 255)
  • FF = the blue value (15×16 + 15 = 255 out of 255)

So #3A86FF is exactly the same as rgb(58, 134, 255). Same color, same math, just written differently. The # symbol at the front just signals "this is a hex code."

One shortcut worth knowing: when both digits in a pair are the same (like FF, 00, CC), you can shorten the whole code. So #FFCC00 becomes #FC0. But if any pair has two different digits, you can't shorten it.

When should you use HEX? Basically everywhere, honestly. It's the default in most design tools and CSS. Brand color guides always give you HEX codes. Copy-pasting between Figma, VS Code, and a CMS? HEX is the universal language. The main time you can't use it is when you need transparency, since traditional HEX doesn't support that (though 8-digit HEX with an alpha channel exists, it's rarely used).

HSL: Finally, a Format That Makes Sense to Human Brains

Here's the problem with both RGB and HEX: if I give you rgb(72, 149, 239), you can't look at that and picture the color without some trial and error. And if I then say "make that color slightly less saturated," you'd have no idea which numbers to tweak.

HSL was invented to solve exactly this. It stands for Hue, Saturation, Lightness, and it describes color the way your brain actually thinks about it.

hsl(211, 83%, 68%)

Let's break that down:

Hue (the first number, 0–360): Imagine a color wheel — a circle where red is at 0°, yellow is around 60°, green is around 120°, cyan is 180°, blue is around 240°, and magenta/purple wraps back around toward 300°. The hue number is just your angle on that wheel. So hsl(0, ...) is a red. hsl(120, ...) is a green. hsl(240, ...) is a blue. Easy.

Saturation (the second number, 0%–100%): This controls how vivid or washed-out the color is. 100% saturation is a bold, intense color. 0% saturation is completely gray — no color at all, just a shade from black to white. 50% is something in between, like a dusty or muted tone. This is incredibly useful for creating color palettes that feel harmonious rather than garish.

Lightness (the third number, 0%–100%): This controls brightness. 0% lightness is always black, no matter what hue you pick. 100% lightness is always white. 50% is the "pure" version of the color. To make a dark navy from blue, you'd drop the lightness. To make a light sky blue, you'd raise it.

Here's where HSL really shines: want to create a button hover state that's just slightly darker? Just drop the lightness by 10%. Want to build five tints of your brand color from pale to deep? Keep the hue and saturation identical, just step the lightness down from 90% to 20%. This is practically impossible to do by hand in RGB or HEX — you'd just be guessing.

When should you use HSL? In CSS when you're building component design systems, generating color scales programmatically, or doing anything that involves making a color lighter, darker, or more/less saturated on the fly. The new oklch() format is becoming popular for similar reasons, but HSL is supported everywhere and perfectly sufficient for most work.

A Real-World Example: Your Brand Has One Color, You Need Five

Say your brand color is that cornflower blue we've been using: #3A86FF. In HSL, that's roughly hsl(214, 100%, 62%). Now you need:

  • A pale background tint → hsl(214, 100%, 95%)
  • A light hover state → hsl(214, 100%, 80%)
  • The base color → hsl(214, 100%, 62%)
  • A dark pressed state → hsl(214, 100%, 45%)
  • A very dark shade for text on light backgrounds → hsl(214, 100%, 25%)

All five colors are perfectly harmonious because they share the same hue and saturation. You just moved the lightness slider. Try doing that intuitively in HEX and you'll spend 20 minutes guessing.

Which Format Should You Default To?

Here's the practical cheat sheet:

  • Copying from design tools, brand guides, or anywhere else: HEX. It's what everyone uses by default.
  • Need transparency: rgba() or the newer hsl() with alpha: hsl(214, 100%, 62% / 0.5).
  • Building a design system, creating color scales, or writing CSS variables: HSL. Your future self will thank you.
  • Working in JavaScript and doing math on colors: RGB or HSL, depending on what kind of manipulation you're doing.

The good news is that all three formats can represent the same colors — you're never "stuck" with one. Every color picker worth its salt (including the browser DevTools, Figma, and most color picker tools) will show you all three formats at once and let you copy whichever one you need.

One Last Thing: Color Pickers Are Your Best Friend Here

You do not need to memorize conversions between these formats. Color pickers do that instantly. But now that you know what the numbers actually mean, you'll use those tools so much more effectively. You'll look at hsl(30, 90%, 55%) and immediately think "warm orange, pretty saturated, slightly bright" — and that mental model is genuinely useful when you're designing.

Color formats aren't arcane computer wizardry. They're just three different ways of pointing at the same color and saying "that one." Now you know what they're saying.