HEX, RGB and HSL colour codes explained
Updated 21 October 2026
Tool for this guide: Colour converter
Short answer: HEX, RGB and HSL describe the same colour in different ways. Type any of them into the colour converter and you get all three, ready to copy as CSS, plus contrast checks against white and black.
The three formats
| Format | Example | How it works |
|---|---|---|
| HEX | #1E90FF | Red, green and blue as two hexadecimal digits each |
| RGB | rgb(30, 144, 255) | Red, green and blue from 0 to 255 |
| HSL | hsl(210, 100%, 56%) | Hue (0–360°), saturation and lightness |
#FF8000 is the same as rgb(255, 128, 0): FF = 255, 80 = 128, 00 = 0.
Why HSL is handy
HSL makes it easy to create variations of one colour: keep the hue, raise the lightness for a tint or lower it for a shade. That's how many design systems build a palette.
Transparency
Add an alpha value for transparency: 8-digit HEX (#1E90FF80), rgba(30, 144, 255, 0.5) or hsla(210, 100%, 56%, 0.5).
Contrast ratios (WCAG)
| Ratio | Passes |
|---|---|
| 4.5:1 or more | WCAG AA for normal text |
| 3:1 or more | WCAG AA for large text (about 24 px, or 19 px bold) |
| 7:1 or more | WCAG AAA for normal text |
Step by step
- Open the colour converter.
- Type HEX, RGB or HSL, use a colour name, or pick a colour.
- Copy the code you need and check the contrast.
Find colours to convert
- The main colour of a logo or photo: dominant colour extractor.
- A full palette: image to palette. See how to get colours from an image.
Questions
How do I convert HEX to RGB?
Type the HEX code, such as #1E90FF, and rgb(30, 144, 255) appears straight away.
Try it now
Type a colour in HEX, RGB or HSL, or pick one, and get every format ready to copy, plus contrast checks for text.
Open colour converter