Every front-end developer juggles color formats: a design hands you HEX, CSS wants a tweak in HSL, and code needs RGB. They all describe the same colors — here’s what each means and when to reach for it.
The same colour in three notations. The orange used on this site is
#e76f51. Put it into our colour converter and it returns231, 111, 81as RGB and12, 76%, 61%as HSL. Read those two side by side and the difference in purpose becomes obvious: RGB tells you how much of each primary to emit, which is what a screen needs but tells you nothing useful about the colour. HSL says “hue 12° — an orange-red — at 76% saturation and 61% lightness”, which is what you need when you want a slightly darker version of the same colour. Change one HSL number and you stay in the same family; change one RGB number and you may land anywhere.
HEX
HEX is the familiar #RRGGBB web notation, where each pair is a red/green/blue channel in hexadecimal (00–FF). #2563eb is the go-to for pasting a fixed brand color. The shorthand #RGB (e.g. #f00) expands each digit (#ff0000). It’s compact but not intuitive to adjust by hand.
RGB
RGB expresses the same channels as decimals 0–255: rgb(37, 99, 235). It maps directly to how screens emit light and is handy in code that manipulates channels. Like HEX, though, nudging a color “a bit lighter” means changing three numbers with no obvious relationship.
HSL
HSL describes color as Hue (0–360° around the color wheel), Saturation (0–100%) and Lightness (0–100%): hsl(217, 83%, 53%). This is the one designers love for adjusting a color:
- Want it lighter? Raise the L.
- Want it more muted? Lower the S.
- Want a sibling color? Shift the H.
That intuitiveness makes HSL ideal for building color scales and light/dark variants of one hue. Convert any color to HSL with a color converter and experiment.
The first three rows explain the one thing about HSL that trips people up. White, black and mid grey all come back with hue 0 — 0, 0%, 50% for the grey — but the hue is not “red”, it is undefined and reported as zero, because saturation is 0%. Dragging a hue slider on a grey does nothing at all, and no amount of hue will tint it until saturation leaves zero. Compare pure red at 0, 100%, 50%: same hue number, completely different meaning.
Alpha: RGBA and HSLA
To add transparency, append an alpha channel (0–1): rgba(37, 99, 235, 0.5) or hsla(217, 83%, 53%, 0.5). Modern CSS also allows alpha in HEX (#2563eb80) and in the space-separated syntax rgb(37 99 235 / 50%).
Which should you use?
- Fixed brand colors, copy-paste from design: HEX.
- Manipulating channels in code: RGB.
- Designing scales, tweaking lightness/saturation, theming: HSL.
They’re interchangeable, so pick whichever makes the current task easiest — and convert when you need another.
Quick tip for design systems
Define your palette in HSL and derive shades by changing only L (and sometimes S). You’ll get harmonious, predictable light/dark variants far more easily than nudging HEX values by trial and error.
Convert instantly between HEX, RGB and HSL — with a live preview — using the free color converter, which runs entirely in your browser.
The same color in every format
It helps to see one color written three ways. These all render as the identical blue:
| Format | Value | Reach for it when |
|---|---|---|
| HEX | #2563eb | Pasting a fixed color from a design or brand guide |
| RGB | rgb(37, 99, 235) | Reading or setting channels in JavaScript/canvas |
| HSL | hsl(217, 83%, 53%) | Lightening, muting or generating a matching shade |
Below is the same set of colours through our own colour converter. The first three rows are deliberately achromatic and the last three are the palette this site actually uses.
| HEX | RGB | HSL |
|---|---|---|
#ffffff | 255, 255, 255 | 0, 0%, 100% |
#000000 | 0, 0, 0 | 0, 0%, 0% |
#808080 | 128, 128, 128 | 0, 0%, 50% |
#ff0000 | 255, 0, 0 | 0, 100%, 50% |
#00ff00 | 0, 255, 0 | 120, 100%, 50% |
#0000ff | 0, 0, 255 | 240, 100%, 50% |
#e76f51 | 231, 111, 81 | 12, 76%, 61% |
#2a9d8f | 42, 157, 143 | 173, 58%, 39% |
#e9c46a | 233, 196, 106 | 43, 74%, 66% |
Common misconceptions
- “HEX is more precise than RGB.” No — both store 8 bits per channel, so
#2563ebandrgb(37, 99, 235)are exactly equal. HEX is just base 16. - “Equal L in HSL means equal brightness.” Not to the eye.
hsl(60, 100%, 50%)(yellow) looks far brighter thanhsl(240, 100%, 50%)(blue) at the same lightness. For perceptually even scales, look at newer spaces like OKLCH. - “
#RGBshorthand works for any color.” Only when each channel is a doubled digit.#2563ebhas no valid three-digit form;#ff0000does (#f00).
FAQ
Is 0.5 alpha the same as 50%?
Yes. rgba(…, 0.5) and the modern rgb(37 99 235 / 50%) describe the same half-transparency.
Do color formats affect accessibility contrast? No. Contrast depends on the actual colors, not how they’re written — the same pair scores identically whether you feed a checker HEX, RGB or HSL.
What about named colors like rebeccapurple?
Handy for quick tests, but there are only ~148 of them, so you’ll switch to HEX or HSL the moment you need a specific shade.
To put these colors to work as gradients or shadows, see the companion guide to CSS gradients and shadows; to lift a color out of an image first, use the image color picker.