Hex, RGB, HSL: A Quick Guide for the Rest of Us

Designer sends you a color: #3B82F6. You need it in RGB for some library. Or you want a slightly darker version. Or you're trying to figure out why it looks different on your monitor.

Color systems aren't complicated, but nobody explains them well. Here's what you actually need to know.

HEX: The Web Standard

#3B82F6 breaks down like this:

• 3B = Red (59 in decimal)
• 82 = Green (130 in decimal)
• F6 = Blue (246 in decimal)

Each pair is a hex number from 00 to FF (0-255 in decimal). More = brighter. #000000 is black. #FFFFFF is white.

Shorthand exists: #FFF = #FFFFFF, #09C = #0099CC. Three characters expand to six by doubling each.

RGB: The Obvious One

rgb(59, 130, 246) is the same color, just written differently. Red 59, Green 130, Blue 246.

Some formats want percentages: rgb(23%, 51%, 96%). Same thing, different notation.

RGBA adds transparency: rgba(59, 130, 246, 0.5) is that blue at 50% opacity.

HSL: The Actually Useful One

hsl(217, 91%, 60%) describes color differently:

• Hue (217): Position on color wheel. 0=red, 120=green, 240=blue.
• Saturation (91%): Intensity. 0%=gray, 100%=vivid.
• Lightness (60%): Brightness. 0%=black, 50%=pure, 100%=white.

Why HSL matters: adjusting colors is intuitive.

Want a darker version? Lower lightness. Want a muted version? Lower saturation. Want a completely different color with same "feel"? Change hue, keep saturation and lightness.

In HEX or RGB, these adjustments require math or guessing. In HSL, they're single number changes.

Converting Between Them

The numbers represent the same color differently. #3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%).

Use a converter when you need a specific format. Most design tools show all three. CSS accepts all three.

Common Situations

"Make this color darker" Convert to HSL, reduce lightness by 10-20%, convert back.

"I need variations for hover states" Convert to HSL. Button: 60% lightness. Hover: 55%. Active: 50%.

"This color looks washed out" Saturation might be too low. Try increasing it in HSL.

"Match brand color exactly" Get the hex code from the brand guidelines. Don't eyeball it.

"Color looks different on different screens" Welcome to color calibration hell. Use the same hex code; accept that monitors vary.

Accessibility Note

Color contrast matters. Light text on light background = unreadable for many people.

There's a ratio: 4.5:1 for normal text, 3:1 for large text. Tools exist to check this. When in doubt, more contrast is better.

White text on that #3B82F6 blue? The contrast ratio is about 4.6:1—just passing. Darker blue would be safer for body text.

---

You don't need to be a designer. You just need to convert between formats and know that HSL makes adjustments easier. Everything else is details.