← All posts
2 min readBy Usman Farooqi
HEX, RGB and HSL Colour Codes Explained (With Converter)
What HEX, RGB and HSL colour codes mean, how to convert between them, and which one to use in CSS. Includes examples and a free converter.
Quick answer: to convert a colour, open the Color Converter, type a HEX code like #0891b2 and copy the RGB or HSL value you need. All three describe the same colour in different ways.
The three formats
| Format | Example | How it works |
|---|---|---|
| HEX | #ff8800 |
Red, green and blue as hexadecimal pairs |
| RGB | rgb(255, 136, 0) |
Red, green, blue from 0 to 255 |
| HSL | hsl(32, 100%, 50%) |
Hue (0 to 360), saturation and lightness |
#ff8800 and rgb(255, 136, 0) are exactly the same orange.
Step by step
- Open the Color Converter.
- Pick a colour with the picker, or type a HEX code. Short codes such as
#09fwork too. - Change the RGB or HSL numbers if you want to adjust it.
- Tap Copy next to the format you need.
Which one should I use in CSS?
All three work. HEX is the most common. HSL is easiest to adjust by hand: keep the hue, and raise the lightness for a lighter shade or lower it for a darker one.
Making a darker or lighter shade
Convert your colour to HSL, change only the lightness number (for example 50% to 35%), and copy it back as HEX. The colour keeps its character.