# HEX, RGB and HSL: three ways to write the same colour, and which to use

> The indigo #6366f1 is also rgb(99, 102, 241) and hsl(239, 84%, 67%). This guide explains how each format works, how to convert between them by hand, and why HSL is the friendliest one when you want a lighter, darker or matching shade.

Published 2026-10-08 by Toolcloak. 4 minute read. Original: https://toolcloak.pages.dev/articles/hex-rgb-and-hsl-three-ways-to-write-the-same-colour-and-which-to-use
Related free tool: [Color Converter](https://toolcloak.pages.dev/tools/color-converter)

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.

> **In short**
> - **RGB** gives each light a strength from 0 to 255. **HEX** writes the same three numbers in base 16: `99, 102, 241` is `#6366f1`.
> - **HSL** describes a colour the way people think: **hue** (0–360° around the wheel), **saturation** (grey to vivid) and **lightness** (black to white).
> - All three can write the same **16,777,216** colours (256 × 256 × 256).
> - To make a lighter or darker shade, **change only the L in HSL**. Doing it in HEX or RGB means changing all three numbers at once.

## Same colour, three spellings

**One indigo, written three ways**

|  | Value | Note |
| --- | --- | --- |
| HEX | #6366f1 | Compact, the usual choice in design files and CSS |
| RGB | rgb(99, 102, 241) | Red, green and blue strengths from 0 to 255 |
| HSL | hsl(239, 84%, 67%) | Hue, saturation, lightness |

*These all produce the exact same pixels on screen. Pick the format that makes your next change easy.*

Try it: [Color Converter](https://toolcloak.pages.dev/tools/color-converter). Paste a colour in any format and get the others instantly, ready to copy.

## 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.

**Channel strengths of #6366f1 (out of 255)**

|  | Value |
| --- | --- |
| Red | 99 |
| Green | 102 |
| Blue | 241 |

*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.

**RGB 99 to HEX 63**

1. **Divide by 16.** 99 ÷ 16 = 6 remainder 3.
2. **Write both digits.** The quotient is the first digit (6), the remainder the second (3).
3. **Repeat for each channel.** 102 → 66, and 241 → F1 (15 × 16 + 1). Join: 63 66 F1.

> **Shorthand and transparency:** When each pair repeats, you can write three digits: `#f60` means `#ff6600`. Adding two more characters gives transparency: `#6366f180` is the same indigo at about 50% opacity (`80` hex = 128 out of 255). This is a detail worth remembering when you use [colour contrast](https://toolcloak.pages.dev/articles/is-your-text-readable-the-contrast-ratio-explained) checks on transparent layers.

To learn more about counting in base 16, see [binary, hex and decimal](https://toolcloak.pages.dev/articles/binary-hex-and-decimal-counting-in-bases-2-10-and-16).

## 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%).

**The hue wheel, laid flat (degrees)**

| Zone | From | To |
| --- | --- | --- |
| Red | 0 | 30 |
| Orange | 30 | 60 |
| Yellow | 60 | 90 |
| Green | 90 | 150 |
| Cyan | 150 | 210 |
| Blue | 210 | 270 |
| Purple | 270 | 330 |
| Pink | 330 | 360 |

*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.*

**Saturation of #6366f1: 84%**

| Zone | Range |
| --- | --- |
| Grey | 0–20% |
| Muted | 20–60% |
| Vivid | 60–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.*

**Three dials, three questions**

| Box | What it means |
| --- | --- |
| Hue (H) | Which colour? 0° red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta. |
| Saturation (S) | How strong? 0% is grey, 100% is the purest version of the hue. |
| Lightness (L) | How bright? 0% black, 50% pure colour, 100% white. |
| Alpha (A) | How opaque? 1 is solid and 0 is invisible. Written hsla or as a fourth value. |

*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.*

**Making a hover colour 10% darker**

| In HEX or RGB | In HSL |
| --- | --- |
| 3 numbers | 1 number |
| Change red, green and blue together | Lower L from 67% to 57% |
| Easy to shift the hue by accident | Hue and saturation stay put |
| Needs a tool or a lot of trial | 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.

> **Equal lightness is not equal brightness:** A yellow and a blue with the same L look very different in brightness, because our eyes are more sensitive to green and yellow light. If you need guaranteed readability, check the actual contrast ratio of the text and its background.

## How big is the colour space?

**Counting colours**

|  | Value | Note |
| --- | --- | --- |
| Levels per channel | 256 | 0 to 255, which is 8 bits |
| Colours in total | 16.7 million | 256 × 256 × 256 = 16,777,216 |
| Storage per pixel | 24 bits | Three bytes, one per channel |

*More than enough colours for ordinary screens, which is why 8 bits per channel became the standard.*

## Quick practice

1. What is `#ff0000` in RGB? **rgb(255, 0, 0)**, pure red.
2. What is `#808080`? **rgb(128, 128, 128)**, a mid grey with saturation 0%.
3. What is `#f60` written in full? **#ff6600**, which is rgb(255, 102, 0).
4. 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.

## Frequently asked questions

### 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.