HTML color codes
Colors used on HTML pages are usually defined with CSS. Whether you write #ff6347, RGB (255 99 71), or HSL (9 100% 64%), you are describing the same tomato-red color using different notations. This guide explains how each format works, when it is useful, and why the different formats exist.
How screens display color
A screen is made up of thousands or even millions of tiny red, green, and blue light sources, grouped in threes, packed so closely together that your eye blends them into a single color rather than seeing individual dots. Every color you see on screen is a mixture of these three primaries at varying intensities.
In traditional 8-bit sRGB notation, each red, green, and blue channel is represented by a value from 0 to 255. A higher number means more of that color channel is included. That gives us 256 × 256 × 256 = 16,777,216 possible combinations. A few examples:
- 255, 255, 0 — red and green at full brightness, blue off. Your eye sees yellow.
- 0, 0, 255 — only blue is lit. Pure blue.
- 0, 0, 100 — blue at partial brightness. A darker blue.
- 255, 255, 255 — all three at full brightness. White.
- 0, 0, 0 — all three off. Black.
Any color on screen is just a specific recipe of these three numbers. The three formats below — hex, RGB, and HSL — are simply different ways of writing that recipe.
Hex codes
Hex is the most common color format on the web. A hex code like #1A6BBD is really just the RGB values written in hexadecimal (base-16) notation instead of the decimal (base-10) numbers we normally use.
Why base-16? In our everyday base-10 system, we count with ten digits: 0 through 9. Hexadecimal uses sixteen digits: 0–9 plus A, B, C, D, E, and F. The letter A represents 10, B represents 11, and so on up to F, which represents 15. If humans had sixteen fingers instead of ten, this is how our numbers would look.
| dec | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| hex | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F | 10 | 11 | 12 | 13 | 14 |
| dec | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
| hex | 15 | 16 | 17 | 18 | 19 | 1A | 1B | 1C | 1D | 1E | 1F | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
The practical advantage is compression. In base-10, the range 0–255 requires up to three digits. In base-16, the same range fits in exactly two digits — 00 through FF. That means a full opaque RGB color uses six hexadecimal digits, plus the leading #.
How to read a hex code: Split the six characters into three pairs. Each pair is one color channel:
#1A6BBD → 1A (red) · 6B (green) · BD (blue)
1A in hex = 26 in decimal (a small amount of red)
6B in hex = 107 in decimal (moderate green)
BD in hex = 189 in decimal (strong blue)
The result is a medium blue — exactly the accent color used on this site.
Shorthand hex: When each pair uses the same digit twice, you can shorten to three characters. #FF6600 becomes #F60. #000000 becomes #000. Not all colors have a shorthand form — #1A6BBD doesn't, because none of its pairs are doubled digits.
RGB
RGB notation writes the same three values in plain decimal — no conversion needed. The format is:
rgb(26, 107, 189)
Each number is 0–255, representing red, green, and blue in that order. This is the most intuitive format if you think in terms of light mixing — higher numbers mean more of that color.
RGBA adds a fourth value for transparency (alpha), ranging from 0 (fully transparent) to 1 (fully opaque):
rgba(26, 107, 189, 0.5) — the same blue at 50% opacity.
In modern CSS, the rgb() function also accepts an alpha value directly, so rgba() is no longer strictly necessary — but it remains widely used and fully supported.
Also, current CSS syntax uses spaces, with a slash before alpha:
rgb(26 107 189 / 50%)
HSL
HSL stands for Hue, Saturation, and Lightness. Unlike hex and RGB, which describe color as a mixture of red, green, and blue light, HSL describes color the way people tend to think about it:
- Hue - the color itself, expressed as a degree on the color wheel (0–360). Red is 0°, green is 120°, blue is 240°.
- Saturation - how vivid the color is, from 0% (gray) to 100% (fully saturated).
- Lightness describes how light or dark the color is, from 0% black to 100% white. At 100% saturation, 50% lightness produces the strongest version of the selected hue.
hsl(210, 76%, 42%) — a hue of 210° (blue range), 76% saturated, 42% lightness. That's the same accent blue again.
HSL is especially useful when you need to create variations of a color — just adjust the lightness for darker and lighter shades, or reduce saturation for a muted version, without changing the hue. Designers often find HSL more intuitive than hex or RGB for building color palettes.
HSLA adds transparency the same way RGBA does:
hsla(210, 76%, 42%, 0.5) — 50% opacity.
Which format should you use?
HEX, RGB, and HSL can represent the same sRGB colors in modern browsers. The best format usually depends on readability, workflow, and how you plan to modify the color.
Hex is the most compact and the most widely used in existing code, design tools, and brand guidelines. If someone hands you a color, it's probably a hex code.
RGB is the most literal — it maps directly to how screens produce color. It's useful when you're calculating or manipulating color values programmatically.
HSL is the most human-friendly. It's the easiest to read, the easiest to adjust, and the best for creating systematic color relationships. Many modern design systems are built around HSL values for this reason.
In practice, most developers use whichever format their team and tools have standardized on. For ordinary modern web development, there is no meaningful performance difference among them.
Modern CSS color formats
Modern CSS also supports lab(), lch(), oklab(), and oklch(). These color spaces are designed so that numerical changes correspond more closely to perceived changes in color, making them useful for creating more consistent palettes and gradients. OKLCH can reduce the uneven-lightness problems designers often encounter with HSL.
The color() function can specify colors in spaces including Display P3, allowing compatible screens to display colors beyond the traditional sRGB gamut.
These formats are supported in modern browsers but not yet as widely adopted as hex, RGB, and HSL. They represent the future direction of color on the web.