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.
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.
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.