Convert a colour between HEX, RGB and HSL, or pick one with the colour picker. Change any value and the others update, with a live preview and ready-to-copy CSS.
| CSS hex | – |
| CSS rgb() | – |
| CSS hsl() | – |
How it works
HEX is the red, green and blue values written in base 16, for example #7C5CFF. RGB gives each of red, green and blue as a number from 0 to 255. HSL describes a colour by hue (the position on the colour wheel from 0 to 360 degrees), saturation (how vivid it is) and lightness (how light or dark it is).
The tool converts between them with the standard formulas, so all three always describe the same colour.
Example
The purple #7C5CFF is rgb(124, 92, 255) and hsl(252, 100%, 68%).
Frequently asked questions
How do I convert HEX to RGB?
Split the hex code into three pairs and convert each pair from base 16 to a number. For 7C5CFF, 7C is 124, 5C is 92 and FF is 255.
Can I type a short hex code?
Yes. A three-digit code such as #f60 is expanded to #ff6600.
Which format should I use in CSS?
All three work in CSS. HEX is the most common; HSL is convenient when adjusting lightness.
More free tools: CSS unit converter · JSON formatter · All free tools
Everything runs in your browser. Nothing you enter is sent or stored.