Color Converter
Convert colors between HEX, RGB and HSL and preview them live.
Converters & Dev
HEX ⇄ RGB ⇄ HSL
Loading tool…
Files are processed in your browser. Nothing is uploaded to a server.
Designers and developers juggle the same colour in several notations: HEX for CSS, RGB for canvas work, HSL for tweaking lightness. This converter translates a colour between all three, shows a live swatch, and gives you copy-ready CSS values.
How to convert a color
- Enter a colour in any format — HEX, RGB or HSL — or use the picker.
- See it instantly translated into the other formats.
- Preview the swatch to confirm it is the colour you expect.
- Copy the value in the notation you need.
The same color, three ways
| Format | Value | Notes |
|---|---|---|
| HEX | #3B82F6 |
Most common in CSS |
| RGB | rgb(59,130,246) |
Red, green, blue channels |
| HSL | hsl(217,91%,60%) |
Hue, saturation, lightness |
Converter features
- Two-way conversion across HEX, RGB and HSL.
- A visual picker and a live preview swatch.
- Handles 3- and 6-digit HEX codes.
- Copy-ready CSS in every format.
Frequently asked questions
Which format should I use in CSS?
All three are valid. HEX is most common; HSL is easiest for making a colour lighter or darker by adjusting one number.
What does the percentage in HSL mean?
The two percentages are saturation (how vivid) and lightness (how bright), while the first number is the hue angle on the colour wheel.
Can I convert a 3-digit HEX like #f0a?
Yes. Shorthand HEX is expanded automatically before conversion.