The same color can be written three different ways in CSS — `#2563eb`, `rgb(37, 99, 235)`, `hsl(221, 83%, 53%)` — and they all produce the identical blue. Knowing what each format means (and when to reach for which) makes picking and tweaking colors far easier.
Here's a plain guide to HEX, RGB and HSL, and how to convert between them.
HEX — the compact classic
A HEX code like `#2563eb` is just red, green and blue written in base-16. It breaks into three pairs: `25` red, `63` green, `eb` blue, each from `00` to `ff` (0–255). It's compact and universal, which is why it's the most common way to write colors — but it's not easy to eyeball or adjust by hand.
RGB — the same values, in decimal
`rgb(37, 99, 235)` is the exact same color as `#2563eb`, just with the red/green/blue values in plain decimal (0–255). Add an alpha channel — `rgba(37, 99, 235, 0.5)` — for transparency. RGB is a little more readable than HEX and handy when you're working with opacity.
HSL — the one designers love
`hsl(221, 83%, 53%)` describes color the way humans think about it: Hue (0–360° around the color wheel), Saturation (how vivid, 0–100%), and Lightness (how bright, 0–100%). Its superpower is tweaking: want the same blue but lighter? Just raise the lightness. Want a matching palette? Keep the hue and vary saturation and lightness. That intuitiveness is why HSL is a favorite for building color systems.
Which should you use?
- HEX — for compact, copy-paste color values (design tools, most CSS).
- RGB / RGBA — when you need transparency or are manipulating channels in code.
- HSL / HSLA — when you're designing or tweaking: adjusting lightness, building shade scales, generating palettes.
They're interchangeable — pick whichever makes the task at hand easiest.
Convert and build colors
Switch any color between HEX, RGB and HSL with the free Color Converter. To build a whole scheme, use the Color Palette Generator, and grab a specific shade out of an image with the Color Picker from Image.
Color ConverterConvert colors between HEX, RGB and HSL.Choosing text and background colors? Run them through the Color Contrast Checker to make sure they're readable and meet accessibility standards.