Hex color codes, RGB, HSL and OKLCH explained

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.

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.

/* 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);

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

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.

.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);
}

Which colour code to use where

To test any of these values, oklch.com shows a colour in every notation and warns when it falls outside a screen's range, and MDN's colour reference covers every syntax. If you are choosing colours rather than writing them, how to choose brand colours is the next step, and colour contrast shows how to check that text stays readable.