How hex color codes work (and what #FF5733 really means)

A hex color like #FF5733 is three numbers in a compact costume. Once you split the six characters back into red, green and blue, every hex code becomes readable. The first pair is red, the second is green, the third is blue, and each pair is a plain value from 0 to 255. That is the whole thing. The rest of this post shows you how to read one and check your own work.

TL;DR: A hex color code is three bytes, red, green and blue, each from 00 to FF (0 to 255), written in base-16 as two characters apiece. #FF5733 is red 255, green 87, blue 51, the same color as rgb(255, 87, 51). A short #FFF expands to #FFFFFF, and an extra pair on the end sets opacity.

The layout: #RRGGBB

Write a full hex color out as #RRGGBB and the pattern is right there. RR is the red pair, GG is green, BB is blue. Each pair is one byte, and a byte holds a value from 0 to 255. Screens make color by mixing red, green and blue light, so the code is just three light levels written down in order.

That means three codes you already know by heart:

• #000000 is red 0, green 0, blue 0. No light at all, so black.
• #FFFFFF is red 255, green 255, blue 255. All three channels full, so white.
• #FF0000 is red 255, green 0, blue 0. Full red, nothing else, so pure red.

This is additive mixing, the opposite of paint. With light, adding all three channels at full gives white, not muddy brown. Turn everything off and you get black.

Why each pair runs 0 to 255

Hex is short for hexadecimal, which means counting in base-16 instead of the base-10 we use by habit. A single hex character holds 16 values: 0 through 9, then A, B, C, D, E, F standing for 10 through 15. Two characters together cover 16 times 16, which is 256 values, counted from 0 up to 255.

That is why a pair tops out at FF, not 99. FF is 15 times 16 plus 15, which is 255, the maximum. The smallest is 00, which is 0. Two hex characters are exactly enough to write any value from 0 to 255 with none left over. One character would only reach 15, three would be more than you need.

The math for turning any pair into a decimal is short: take the first character’s value, multiply by 16, then add the second character’s value. For 57, that is 5 times 16, which is 80, plus 7, which gives 87. For 33, that is 3 times 16, which is 48, plus 3, which gives 51.

Splitting #FF5733 into red, green and blue

Break #FF5733 at the pairs and read each one:

• FF is red. FF is 255, the maximum, so this color is fully red.
• 57 is green. That is 87, a low-to-middling amount.
• 33 is blue. That is 51, low.

Lots of red, a little green, a bit less blue. Mixed together, that is a warm orange-red. You rarely convert pairs by hand in daily work, but doing it once makes the notation click. If you would rather build whole palettes than convert in your head, the palette generator at color.hivly.net shows the hex and the channel values side by side.

Predict, then check

Here is a code you can work out yourself before verifying it. Take #3366CC.

Split it into pairs: 33, 66, CC. Now convert each one with the multiply-by-16 rule.

• 33 is 3 times 16, which is 48, plus 3. That is 51 for red.
• 66 is 6 times 16, which is 96, plus 6. That is 102 for green.
• CC is 12 times 16 (C stands for 12), which is 192, plus 12. That is 204 for blue.

So #3366CC is red 51, green 102, blue 204. Low red, medium green, high blue. Your prediction should be a fairly saturated blue with a slight lean toward the cooler side. To check it, drop #3366CC into any color picker in your browser dev tools or a design app, and it will report rgb(51, 102, 204). If your three numbers match, you have got the method.

Why hex and rgb() are the same color

A hex code and an rgb() value are two notations for one set of numbers. #FF5733 and rgb(255, 87, 51) describe the identical pixel. Hex writes the three channels in base-16 and packs them tight. rgb() writes the same three channels in base-10 and separates them with commas. They convert back and forth exactly, and the browser treats them as the same instruction.

Which one you see in CSS is mostly habit. Hex is compact and easy to paste from a design tool, so it fills most stylesheets. The rgb() form is easier to read at a glance and makes it obvious when you want to nudge one channel. Pick whichever is clearer in the moment.

The shorthand and the alpha forms

Hex has two variants beyond the six-character form.

The short version uses three characters, and each one is doubled to make a pair. #FFF expands to #FFFFFF, which is white. #F00 expands to #FF0000, pure red. #39C expands to #3399CC. The shorthand only works when both characters in a pair would be the same, so #FF5733 has no three-character version. It is a convenience for round values, not a separate system.

The longer variant adds a fourth pair for opacity, called the alpha channel. An eight-character code like #FF5733CC keeps the same red, green and blue, then uses the final pair, CC, on the familiar 0 to 255 scale. 00 is fully transparent, FF is fully opaque. CC is 204, which is about 80 percent of 255, so #FF5733CC is that orange-red, mostly solid but letting a little of the background through. The four-character shorthand, like #FFFA, doubles each character the same way, so #FFFA is #FFFFFFAA.

Reading a hex code at a glance

Once you know the layout you can read most codes without converting anything. First pair is red, middle is green, last is blue, and you judge each pair by how high it sits. A pair near FF means a lot of that channel. A pair near 00 means almost none. #FF5733 reads as high red, low green, low blue, so it is warm and reddish before you compute a single value.

That quick read is where hex earns its place, and also where it runs out. The numbers map cleanly to how a screen mixes light, but they do not match how your eye judges brightness. Two codes that differ by the same amount on paper can look worlds apart. When you need to reason about lightness or saturation, formats like HSL or OKLCH describe a color closer to the way people see it. Hex stays the compact way to store and paste the exact mix.