You've probably seen colors defined three different ways in CSS: #FF5733, rgb(255, 87, 51), and hsl(11, 100%, 60%). They all describe the exact same orange-red. So why do we need three formats, and when should you reach for each one?
The answer comes down to how you think about color. Each format maps to a different mental model — and picking the right one for the task at hand will save you time and guesswork.
HEX: The Default You Already Know
HEX (hexadecimal) is the format most designers encounter first. It's a six-character string prefixed with #, where pairs of characters represent red, green, and blue intensity on a 0–255 scale, encoded in base-16.
#FF5733 breaks down to:
- FF = 255 red
- 57 = 87 green
- 33 = 51 blue
HEX is compact. It's everywhere — design tools, brand guidelines, CSS files, Figma tokens. If someone hands you a color, it's almost always in HEX.
But HEX has a real weakness: it's not human-readable. Can you tell at a glance whether #3B82F6 is lighter or darker than #2563EB? Nope. You need a tool for that — or you need a different format.
When to use HEX
- Copying colors from design specs or brand guides
- Quick one-off color values in CSS
- Sharing colors with teammates who expect the
#RRGGBBconvention - Anywhere brevity matters (HTML email templates, SVG attributes)
Shorthand HEX
If each pair repeats the same digit, you can shorten it. #FF3300 becomes #F30. CSS handles both. The three-digit version is just syntactic sugar — same color, fewer characters.
RGB: The Machine's Perspective
RGB (Red, Green, Blue) is what HEX actually represents under the hood. Instead of base-16, you get three decimal values from 0 to 255.
color: rgb(255, 87, 51);
It's more readable than HEX — you can at least see the individual channel values. Bump the red channel down and you know you're removing warmth. But "more readable" doesn't mean intuitive. Want a slightly muted version of that orange? Good luck adjusting three separate channels by feel.
Where RGB truly shines is alpha transparency. The rgba() function (or rgb() with a fourth value in modern CSS) lets you set opacity per color:
background: rgb(255 87 51 / 0.5); /* 50% transparent */
This is something HEX can technically do with an 8-digit value (#FF573380), but barely anyone uses or remembers the syntax.
When to use RGB
- When you need transparency (rgba or the
/alpha syntax) - Programmatic color manipulation — RGB channels map directly to how screens emit light
- When a color name finder or API returns RGB values and you want to drop them straight into your stylesheet
- Canvas and WebGL work, where the API expects RGB tuples
HSL: The Human-Friendly Format
HSL stands for Hue, Saturation, Lightness — and it's the format that actually matches how people think about color.
color: hsl(11, 100%, 60%);
- Hue (0–360): Position 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, 100% is white, 50% is the "pure" color.
Here's what makes HSL powerful: you can manipulate colors intuitively. Need a darker version? Drop the lightness. Need a pastel? Crank lightness up and pull saturation down. Need a complementary color? Add 180 to the hue. These are operations you can do in your head.
Try it yourself — use a hue shift tool and watch how rotating the hue value cycles through entirely different colors while keeping the same saturation and brightness feel.
When to use HSL
- Building color systems or design tokens (vary lightness for shades, keep hue constant)
- Creating hover/active states by adjusting lightness by 5–10%
- Generating color palettes programmatically — HSL makes evenly-spaced hues trivial
- Theming — swap the hue and your entire palette shifts
- When you want to understand a color at a glance
HSL and transparency
Just like RGB, HSL supports alpha: hsl(11 100% 60% / 0.5). Same syntax pattern, same result.
Converting Between Formats
You don't have to pick one format and stick with it forever. Most workflows involve bouncing between them. A designer sends you HEX, you convert to HSL to build out a shade scale, and your code ships whichever format the team prefers.
The math behind conversions is straightforward but tedious to do by hand. A random color generator will show you the same color in all three formats side by side, which is handy for learning how the values relate to each other.
For quick reference:
| What you want | Best format | |---|---| | Paste a brand color into CSS | HEX | | Add transparency | RGB or HSL with alpha | | Create lighter/darker variants | HSL | | Build a color palette from scratch | HSL | | Work with JavaScript canvas | RGB | | Share with a non-technical person | HEX |
CSS Color Level 4: What's New
Modern CSS (supported in all major browsers) simplifies the syntax. You no longer need commas or the separate rgba()/hsla() functions:
/* Old syntax */
color: rgba(255, 87, 51, 0.5);
/* Modern syntax */
color: rgb(255 87 51 / 50%);
color: hsl(11 100% 60% / 50%);
There are also newer color spaces like oklch() and lab() gaining traction. They solve some perceptual uniformity problems with HSL (where "50% lightness" doesn't look equally bright across all hues). But for day-to-day web work, HEX/RGB/HSL still cover 99% of use cases.
Picking the Right Format for Your Project
There's no single right answer — it depends on what you're doing.
If your team's design system specifies HEX tokens, use HEX. If you're building a theming system and need to generate shades dynamically, HSL is your best friend. If you're doing image processing or working with WebGL, RGB makes the most sense.
Many experienced developers settle into a pattern: HEX for static values, HSL for anything dynamic. That's a solid default.
The most practical skill isn't memorizing conversion formulas. It's knowing which format makes your current task easier — and having a fast way to convert when you need to switch. Bookmark a color conversion tool, learn the HSL mental model, and you'll spend less time fiddling with color values and more time actually designing.
FAQ
What's the difference between HEX, RGB, and HSL?
They're three ways to describe the same colors. HEX uses a six-character hexadecimal code (#FF5733). RGB specifies red, green, and blue channel values from 0–255. HSL describes color using hue (position on the color wheel), saturation (vividness), and lightness (brightness). All three can represent the same 16.7 million colors — the difference is how you express them.
Which color format is best for web design?
HEX is the most common for static colors — it's short and universally understood. HSL is better when you need to create variations (lighter shades, hover states, palette generation) because you can adjust lightness and saturation independently. RGB is best when you need alpha transparency or are doing programmatic color work.
How do I convert between HEX, RGB, and HSL?
You can convert manually using formulas, but it's faster to use a tool. Drop a HEX code into a color name finder to see its RGB and HSL equivalents instantly, or generate colors in all formats at once with a random color generator.
Can I use HSL in all browsers?
Yes. HSL has been supported in all major browsers for over a decade. The modern space-separated syntax (hsl(11 100% 60% / 50%)) works in all current browsers too. There's no compatibility reason to avoid HSL.
Does the color format affect page performance?
No. The browser converts every color to the same internal representation regardless of whether you wrote it in HEX, RGB, or HSL. There's zero performance difference. Pick whichever format makes your code more readable and maintainable.