The pattern behind every hex color
A hex color like #FF5733 is three pairs of characters: FF (red), 57 (green), 33 (blue). Each pair is a number from 00 to FF in hexadecimal — which is 0 to 255 in normal decimal. So #FF5733 means red 255, green 87, blue 51: a warm orange-red.
Why base 16?
Hexadecimal (base 16) uses digits 0–9 then A–F for 10–15. Two hex digits express exactly one byte (0–255), which maps perfectly to one color channel. That's why colors are two characters per channel.
Reading colors quickly
#000000= all zero = black.#FFFFFF= all max = white.#FF0000= pure red,#00FF00= pure green,#0000FF= pure blue.- Equal values (
#808080) always make a shade of gray. - Shorthand:
#F53expands to#FF5533.
Hex vs RGB vs HSL
Hex and rgb(255,87,51) are the same thing written differently. HSL (hue, saturation, lightness) is a third way that's easier for humans to adjust — but browsers treat them all identically.
Converting hex to RGB by hand
Each pair is a two-digit base-16 number, so you convert it the same way you would any number: multiply the first digit by 16 and add the second. For 57 that is 5×16 + 7 = 87. Letters stand for 10–15, so C8 is 12×16 + 8 = 200. Going the other way, divide by 16: 200 ÷ 16 = 12 remainder 8, which is C and 8. Once you have done this a few times you can read most colors at a glance: a high first pair means a lot of red, a high middle pair a lot of green, and so on.
Alpha: the eight-digit form
Modern CSS also accepts an eight-digit hex color, #RRGGBBAA, where the last pair is opacity. FF is fully opaque and 00 is fully transparent, so #FF573380 is the same orange-red at roughly 50% opacity (0x80 = 128, about half of 255). There is a four-digit shorthand too: #F538 expands to #FF553388. All current major browsers support both forms; if you need to support very old browsers, use rgba() instead.
Why two colors that look the same have different codes
The human eye cannot tell apart many neighbouring values. #FF5733 and #FE5634 differ by one step in each channel — out of 256 — and almost nobody can see it. That is why design systems pick a small palette and stick to it: it keeps buttons, borders and text consistent instead of drifting through dozens of near-identical shades copied from different mockups.
Hex codes and accessibility
A hex code says nothing about whether text will be readable. Readability depends on the contrast ratio between text and background, which is calculated from the relative luminance of the two colors. WCAG asks for at least 4.5:1 for normal body text and 3:1 for large text. Pale grey #999999 on white, a very common choice, comes out at about 2.8:1 and fails for body text. Check any pairing before you ship it — our color contrast checker gives the ratio and the WCAG pass/fail result instantly.
Quick tools
To turn a hex code into RGB or HSL values (or back again) without doing the arithmetic, use the hex to RGB converter. If you are converting other numbers between base 16, base 10 and binary, the number base converter uses exactly the same maths as above.
Frequently Asked Questions
What does the # mean in a color code?
The # (hash) simply signals that what follows is a hexadecimal color value. It has no numeric meaning itself.
Can hex codes include transparency?
Yes — an 8-digit hex adds a fourth pair for alpha (opacity), e.g. #FF573380 is the same color at 50% opacity.
Why do some codes have only 3 characters?
3-digit hex is shorthand where each digit is doubled: #F53 becomes #FF5533. It only works when both digits of each pair match.