# Hex color codes, RGB, HSL and OKLCH explained

[Canonical HTML page](https://gradiently.design/guide/color-codes-explained)

#7c3aed, rgb(124 58 237), hsl(262 83% 58%) and oklch(54.1% 0.247 293) are the same violet. Here is what each notation is actually saying, and when each one earns its place.

## The short version

- Hex color codes like `#7c3aed` are a compact way to write red, green and blue values from 0 to 255, each as two base-16 digits.
- RGB, hex and HSL all describe the same sRGB colours, so any colour written in one can be converted exactly into the others.
- HSL is easy to adjust by hand, but its lightness value does not match how light colours actually look, so yellow and blue at 50% look very different.
- OKLCH describes colour by perceived lightness, chroma and hue, which makes it the best notation for building palettes, tints and smooth gradients.
- A practical rule: share brand colours as hex, and build palettes and gradients in OKLCH.

**Hex color codes** such as `#7c3aed` are the most common way to write a colour on screen: a `#` followed by six characters that give the amount of red, green and blue. RGB writes the same numbers in decimal, HSL rearranges them into hue, saturation and lightness, and OKLCH describes colour the way the eye perceives it. They are different notations for the same colours, and each is best at a different job.

- Violet: #7c3aed
- Sky: #0ea5e9
- Orange: #f97316
- Green: #16a34a
- Ink: #111827

Five colours used as examples throughout this guide. The table below writes each one in all four notations.

## How hex color codes work

A hex code is three pairs of base-16 digits: `#RRGGBB`. Base 16 counts 0 to 9 and then a to f, so each pair runs from `00` (none) to `ff` (255, full). In `#7c3aed`, red is `7c` (124), green is `3a` (58) and blue is `ed` (237): lots of blue, a fair amount of red, little green, which is violet. Three channels of 256 values give 16,777,216 possible colours.

- **Shorthand:** `#f0c` is the same as `#ff00cc`. Each digit is doubled, so it only works for colours whose pairs repeat.
- **Transparency:** an eight-digit code adds alpha at the end. `#7c3aed80` is the violet at about 50% opacity, because `80` is 128 out of 255.
- **Case does not matter:** `#7C3AED` and `#7c3aed` are identical.
- **Greys have three equal pairs:** `#767676`, `#1a1a1a` and `#f4f4f4` are all neutral.

## RGB: the same numbers in decimal

RGB writes the three channels as ordinary numbers from 0 to 255. Modern CSS separates them with spaces and adds transparency after a slash; the older comma syntax and `rgba()` still work everywhere. RGB is handy when a tool or API asks for numbers, or when you want to read a colour's make-up at a glance.

```css
/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);
```

Modern space-separated syntax on top, the older comma syntax below it. Browsers accept both.

## HSL: hue, saturation and lightness

HSL describes a colour by its **hue** as an angle on the colour wheel (0 is red, 120 green, 240 blue), its **saturation** from grey (0%) to full colour (100%), and its **lightness** from black (0%) through the pure colour (50%) to white (100%). It is easy to tweak by hand: to make a darker violet, lower the last number.

The catch is that HSL's lightness is a formula, not a measurement of how light a colour looks. Yellow at 50% lightness looks far brighter than blue at 50%. Build a palette by keeping HSL lightness equal and the colours will not look equally light, which is exactly why default rainbows look striped. See [rainbow gradients](https://gradiently.design/guide/rainbow-gradient) for the visible result.

## OKLCH: colour the way you see it

OKLCH comes from Oklab, a colour space published by Björn Ottosson in 2020 and now part of CSS. It uses three values: **L** is perceived lightness from 0% to 100%, **C** is chroma, how colourful it is, from 0 for grey up to about 0.37 for the most vivid colours, and **H** is the hue angle. Equal L values really do look equally light, so you can change one quality without disturbing the others.

| Colour | Hex | RGB | HSL | OKLCH |
| --- | --- | --- | --- | --- |
| Violet | `#7c3aed` | `124 58 237` | `262 83% 58%` | `54.1% 0.247 293` |
| Sky | `#0ea5e9` | `14 165 233` | `199 89% 48%` | `68.5% 0.148 237` |
| Orange | `#f97316` | `249 115 22` | `25 95% 53%` | `70.5% 0.187 48` |
| Green | `#16a34a` | `22 163 74` | `142 76% 36%` | `62.7% 0.17 149` |
| Ink | `#111827` | `17 24 39` | `221 39% 11%` | `21% 0.032 265` |

The same five colours in four notations. HSL and OKLCH values are rounded. Notice how HSL calls the green darker than the violet, while OKLCH shows it is actually lighter.

OKLCH shines in gradients. Blending in plain sRGB, the default for hex colours, draws a straight line through the RGB cube, and colours on opposite sides of the wheel meet in grey. Blending in OKLCH keeps chroma and travels around the hue wheel instead.

- Blue to yellow in sRGB: `linear-gradient(90deg, #2563eb 0%, #facc15 100%)`
- Blue to yellow in OKLCH: `linear-gradient(90deg, #2563eb 0%, #009edb 25%, #00c49e 50%, #82d14d 75%, #facc15 100%)`

The same two stops. In sRGB the middle falls to a grey olive; in OKLCH it passes through teal and green. More in [muddy gradients](https://gradiently.design/guide/muddy-gradients).

```css
.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}
```

OKLCH makes tints and shades predictable: change L in even steps and lower C near the ends so the colours stay on screen.

## Which colour code to use where

| Job | Best notation | Why |
| --- | --- | --- |
| Brand guide, design handoff | Hex | Short, universal, pasted into every tool |
| Transparency in CSS | RGB or 8-digit hex | Clear alpha after the slash |
| Quick tweaks by hand | HSL | Easy to nudge hue or darkness |
| Palettes, tints and shades | OKLCH | Equal steps look equal |
| Gradients | OKLCH | Blends without grey middles |
| Wide-gamut screens | OKLCH | Can reach colours outside sRGB |
| Print | CMYK or spot colours | Screen codes never print exactly; see [printing gradients](https://gradiently.design/guide/print-gradients) |

None of these is wrong. The skill is using each where it helps.

> **Screens are not paper** Hex, RGB, HSL and OKLCH all describe light from a screen. Printers mix ink, which covers a different range of colours, so always proof brand colours in print rather than trusting a converted code.

To test any of these values, [oklch.com](https://oklch.com) shows a colour in every notation and warns when it falls outside a screen's range, and [MDN's colour reference](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) covers every syntax. If you are choosing colours rather than writing them, [how to choose brand colours](https://gradiently.design/guide/how-to-choose-brand-colors) is the next step, and [colour contrast](https://gradiently.design/guide/color-contrast-accessibility) shows how to check that text stays readable.

## FAQ

### What do the six characters in a hex color code mean?

They are three pairs of base-16 digits for red, green and blue. Each pair runs from `00` (0) to `ff` (255), so `#7c3aed` means red 124, green 58, blue 237.

### Is hex the same as RGB?

Yes. Hex is RGB written in base 16. `#7c3aed` and `rgb(124 58 237)` are exactly the same colour.

### What is OKLCH?

OKLCH is a colour notation based on the Oklab colour space. It describes perceived lightness, chroma and hue, so equal lightness values look equally light, which makes palettes and gradients far more predictable.

### How do I add transparency to a hex code?

Add two more digits for alpha. `#7c3aed80` is about 50% opacity and `#7c3aedcc` is about 80%. In CSS you can also write `rgb(124 58 237 / 0.5)`.

### Which colour code should I use in CSS?

Hex is fine for single colours. Use OKLCH for palettes, tints, dark mode and gradients, where its perceptual lightness avoids uneven steps and grey middles.