In this article
Designers send you #4f46e5, a website shows rgb(79, 70, 229), and a CSS file says hsl(243, 75%, 59%). Itโs all the same shade of indigo. Hereโs how these colour codes work and when to use each.
RGB: mixing light
Screens create colours by mixing red, green and blue light. Each channel has a value from 0 to 255:
rgb(0, 0, 0)โ black (no light)rgb(255, 255, 255)โ white (all channels full)rgb(255, 0, 0)โ pure redrgb(79, 70, 229)โ indigo: a little red, a little green, lots of blue
HEX: RGB in shorthand
A HEX code is the same three numbers written in hexadecimal (base 16), two digits each: #RRGGBB.
Hexadecimal uses 0โ9 and then aโf for 10โ15. So each pair goes from 00 (0) to ff (255).
#4f46e5
4f = 4 ร 16 + 15 = 79 (red)
46 = 4 ร 16 + 6 = 70 (green)
e5 = 14 ร 16 + 5 = 229 (blue)
โ rgb(79, 70, 229)
Three-digit HEX is shorthand: #fa0 = #ffaa00.
HSL: how humans think about colour
HSL describes colour the way people talk about it:
- Hue โ the colour on a 0โ360ยฐ wheel (0 red, 120 green, 240 blue)
- Saturation โ how vivid (0% grey, 100% full colour)
- Lightness โ how light or dark (0% black, 50% normal, 100% white)
Our indigo is hsl(243, 75%, 59%). Want a lighter tint for a background? Keep the hue and saturation and raise lightness to 95%. Want a darker shade for hover states? Lower it to 45%. Thatโs why HSL is popular for building colour palettes.
When to use which
| Format | Best for |
|---|---|
| HEX | Sharing colours, brand guidelines, CSS โ short and copy-friendly |
| RGB / RGBA | When you need transparency or are working in code with numbers |
| HSL / HSLA | Creating tints, shades and consistent palettes |
Contrast: making text readable
A beautiful colour is useless if text on it canโt be read. The WCAG accessibility guidelines use a contrast ratio from 1:1 (no contrast) to 21:1 (black on white):
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Our indigo #4f46e5 has a contrast of about 6.3:1 with white, so white text on it passes AA. A bright yellow like #ffcc00 has only about 1.5:1 with white โ use dark text on yellow instead.
Good contrast helps everyone: people with low vision, older users, and anyone reading a phone outdoors in bright sunlight.
Build a palette from one colour
- Start with your brand colour.
- Create tints (raise lightness) for backgrounds and highlights.
- Create shades (lower lightness) for text, borders and hover states.
- Check contrast for every text-and-background pair you use.
Convert and explore colours
Our Color Picker & Converter converts between HEX, RGB and HSL instantly, shows contrast with white and black, recommends a readable text colour, and generates tints and shades you can click to use. In Chrome and Edge, you can even pick a colour from anywhere on your screen.
Free toolTry the Color Picker & ConverterPick any colour and get its HEX, RGB and HSL codes, shades and contrast.Frequently asked questions
Are HEX and RGB colours exactly the same?
Yes. #4f46e5 and rgb(79, 70, 229) describe the identical colour.
What does a 3-digit HEX code mean?
It's shorthand where each digit is doubled: #fa0 means #ffaa00.
What is the alpha value in rgba() and hsla()?
Alpha sets transparency from 0 (fully transparent) to 1 (fully opaque).
Written by the Toolsopedia team. Spotted an error? Tell us and weโll fix it.