HEX, RGB and HSL explained
They all describe the same colour in different ways. HEX is the familiar #rrggbb web format, where each pair of characters is the red, green and blue amount in hexadecimal. RGB writes those same three channels as numbers from 0–255. HSL takes a different approach — hue (the colour on the wheel), saturation (how vivid) and lightness (how light or dark) — which makes it much easier to create tints and shades of a colour by nudging one value.
How to use the converter
- Pick a colour with the swatch, or type a hex code.
- See the HEX, RGB and HSL values update together, with a live preview.
- Copy whichever format your CSS, design tool or code needs.
Why HSL is handy for designers
To make a lighter version of a colour, you’d have to juggle all three RGB channels — but in HSL you simply raise the lightness. That makes HSL ideal for building consistent palettes, hover states and shades from a single base colour.
Frequently asked questions
Can I paste short hex like #abc? Yes — 3-digit hex codes are expanded automatically.
Which format should I use in CSS? All three work in modern CSS; HEX and RGB are most common, while HSL is great when you want to tweak lightness or saturation.
Is it private? Yes — colour conversion happens entirely in your browser.