#2563EB, rgb(37, 99, 235) and hsl(221, 83%, 53%) are the same blue written three ways. Each format exists because it makes a different job easier — here's which to reach for when.
HEX — the compact identifier
A HEX code packs red, green and blue into six hexadecimal digits: #2563EB means red 25, green 63, blue EB (in base-16). It's the shortest way to write a color, the default in design tools, and the format everyone pastes into chat. Its weakness: you can't reason about it. Is #7C3AED lighter or darker than #6D28D9? No human can tell at a glance.
RGB — the machine's native view
rgb(37, 99, 235) states each channel from 0–255, matching how screens physically mix light. It's ideal when a value comes from code or a color picker, and its rgba() form adds transparency: rgba(37, 99, 235, 0.5) is the same blue at half opacity — the standard way to make tints and translucent overlays.
HSL — the format humans can edit
hsl(221, 83%, 53%) describes color the way people think: hue (position on the color wheel, 0–360°), saturation (how vivid), lightness (how bright). Want a darker shade of your brand color? Lower the lightness and nothing else changes. Want a harmonious second color? Shift the hue and keep S and L. This is why design systems generate palettes in HSL.
HEX ↔ RGB ↔ HSL instantly, with live preview and shades.
Open Color ConverterWhich should you use?
| Task | Best format |
|---|---|
| Copying a color from a design | HEX |
| Adding transparency | RGBA / HSLA |
| Creating lighter/darker variants | HSL |
| Building a palette from one brand color | HSL |
A note on contrast
Whatever format you use, text must remain readable: aim for a contrast ratio of at least 4.5:1 for body text against its background. Check any pair with the Contrast Checker — it grades your combination against accessibility standards, and pairs nicely with the Color Picker when you're extracting colors from an image.