In this article
A colour on a screen is three small lights, red, green and blue, each shining at some strength. HEX, RGB and HSL are different ways to write down the same three strengths. Knowing which to pick makes everyday design jobs much easier, such as making a button hover colour or a matching border.
Same colour, three spellings
These all produce the exact same pixels on screen. Pick the format that makes your next change easy.
RGB: mixing three lights
Each of the three channels runs from 0 (off) to 255 (full). Full red, no green, no blue is pure red. All three at 255 makes white, and all at 0 makes black. When the three values are equal, you get a grey. Our indigo has little red (99), a bit more green (102) and a lot of blue (241), so it leans strongly blue.
Blue dominates at 241, so the colour reads as blue-violet. Red and green are close to each other and far lower.
| Colour | RGB | HEX | HSL |
|---|---|---|---|
| Red | 255, 0, 0 | #ff0000 | 0°, 100%, 50% |
| Orange | 255, 128, 0 | #ff8000 | 30°, 100%, 50% |
| Green | 0, 255, 0 | #00ff00 | 120°, 100%, 50% |
| Blue | 0, 0, 255 | #0000ff | 240°, 100%, 50% |
| White | 255, 255, 255 | #ffffff | 0°, 0%, 100% |
| Black | 0, 0, 0 | #000000 | 0°, 0%, 0% |
Pure white and black have equal channels, so they have no hue, and their saturation is 0 by convention. In HSL, white is always L = 100% and black L = 0%.
HEX: the same numbers in base 16
A hex code is just RGB with each number written as two characters in base 16, where the digits go 0–9 then A–F. 99 becomes 63, 102 becomes 66 and 241 becomes F1. Put them together after a hash: #6366f1.
- 1Divide by 1699 ÷ 16 = 6 remainder 3.
- 2Write both digitsThe quotient is the first digit (6), the remainder the second (3).
- 3Repeat for each channel102 → 66, and 241 → F1 (15 × 16 + 1). Join: 63 66 F1.
To learn more about counting in base 16, see binary, hex and decimal.
HSL: describing colour like a person
Ask someone to describe a colour and they say “a bright blue” or “a pale pink”. HSL matches that language. Hue is the position on the colour wheel in degrees (red at 0°, green at 120°, blue at 240°). Saturation is how vivid it is, from grey (0%) to full colour (100%). Lightness goes from black (0%) through the pure colour (50%) to white (100%).
Our indigo sits at 239°, in the blue band, close to violet. Turn the dial and you move around the rainbow without changing how vivid or light it is.
- Grey0–20%
- Muted20–60%
- Vivid60–100%
The bands are only a rough guide. At 84%, this indigo is quite vivid, which is why it is popular for buttons and links.
Changing one dial leaves the other two alone, which is exactly why HSL is easier to edit by hand.
Why HSL makes shades easy
Keep the hue (239°) and saturation (84%) the same and slide only the lightness. You get a full family of shades that obviously belong together, which is the idea behind most design systems.
| Lightness | HSL | HEX | Typical use |
|---|---|---|---|
| 95% | hsl(239, 84%, 95%) | #e8e8fd | Backgrounds, tints |
| 85% | hsl(239, 84%, 85%) | #b9baf9 | Backgrounds, tints |
| 75% | hsl(239, 84%, 75%) | #8a8bf5 | Borders, icons |
| 65% | hsl(239, 84%, 65%) | #5b5df1 | Borders, icons |
| 55% | hsl(239, 84%, 55%) | #2c2fed | Borders, icons |
| 45% | hsl(239, 84%, 45%) | #1216d3 | Buttons, links |
| 35% | hsl(239, 84%, 35%) | #0e11a4 | Hover and dark text |
| 25% | hsl(239, 84%, 25%) | #0a0c75 | Hover and dark text |
Only the L value changes from row to row. Trying to do this by editing HEX digits is much harder.
- Change red, green and blue together
- Easy to shift the hue by accident
- Needs a tool or a lot of trial
- Lower L from 67% to 57%
- Hue and saturation stay put
- Result is the same family of colour
Both end as the same kind of pixels, but HSL gets you there with one edit.
For a matching accent, add 180° to the hue to get the opposite colour on the wheel. For our indigo that is hsl(59, 84%, 67%), or #f2ef64, a bright yellow that contrasts strongly.
How big is the colour space?
More than enough colours for ordinary screens, which is why 8 bits per channel became the standard.
Quick practice
- What is
#ff0000in RGB? rgb(255, 0, 0), pure red. - What is
#808080? rgb(128, 128, 128), a mid grey with saturation 0%. - What is
#f60written in full? #ff6600, which is rgb(255, 102, 0). - You want a lighter version of hsl(239, 84%, 67%). Raise L, for example to 77% for a softer tint.
Use HEX to copy and paste, RGB when working with code that needs numbers, and HSL when you want to adjust a colour by hand. A converter lets you switch whenever it helps.
Questions people ask
How do you convert HEX to RGB?
Split the code into three pairs and convert each from base 16 to decimal. For #6366f1: 63 → 99, 66 → 102, f1 → 241, so rgb(99, 102, 241).
What is the difference between RGB and HSL?
They describe the same colours. RGB mixes red, green and blue light. HSL uses hue, saturation and lightness, which is closer to how people think about colour.
What does #fff mean?
It is shorthand for #ffffff, which is white. Each digit is doubled, so #f60 is #ff6600.
How do I make a colour lighter?
In HSL, raise the lightness value. In RGB or HEX you would need to move all three channels closer to 255.
How many colours can HEX codes represent?
16,777,216 (256³), since each of the three channels has 256 levels.
How do I add transparency to a HEX colour?
Add two more hex digits for alpha: 00 is invisible and ff is solid. For example, #6366f180 is about 50% opaque.