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

A color like #FF5733 looks like a code you are meant to copy and never understand. It is not a code in that sense. It is three plain numbers wearing a compact disguise, and once you can split the six characters back into red, green and blue, every hex color you meet becomes readable. The trick is knowing that hex is just counting in base-16.

TL;DR: A hex color code is three numbers, red, green and blue, each from 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 transparency.

What the six characters in a hex code actually are

A hex color is three numbers glued together, one for red, one for green, one for blue. The six characters after the # split into three pairs: the first pair is red, the second is green, the third is blue. Each pair is a single value from 0 to 255 that says how much of that channel to mix in. That is the whole structure.

So #FF5733 is not one long number. It is FF for red, 57 for green, 33 for blue, three separate amounts read left to right. Screens build every color by mixing those three channels of light, and the hex code is just a tidy way to write down the three levels in six characters instead of spelling them out.

Why each pair runs 0 to 255 in base-16

Hex is short for hexadecimal, which means counting in base-16 instead of the base-10 we use by default. 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 possible values, counted from 0 up to 255. That is where the channel range comes from.

This is why a pair tops out at FF rather than 99. In base-10, FF works out to 15 times 16 plus 15, which is 255, the maximum. The smallest is 00, which is 0. Every channel sits somewhere in that 256-step range, and two hex characters are exactly enough to write any value in it without waste. One character would only reach 15, three would be more than needed.

How to split #FF5733 into red, green and blue

Take #FF5733 and break it into its three pairs to see the actual color. FF is the red channel, and FF is 255, the maximum, so this color is fully red. 57 is the green channel, which is 87 in base-10, a low-to-middling amount. 33 is the blue channel, which is 51, also low. Lots of red, a little green, a little less blue, mixed together, gives a warm orange-red.

The math for any pair is the same. The first character is its value times 16, and you add the second character’s value. For 57, the 5 is 5 times 16, which is 80, plus the 7, which gives 87. For 33, the 3 is 3 times 16, which is 48, plus 3, which gives 51. You rarely need to do this by hand, but doing it once makes the notation click. If you would rather build and read whole palettes than convert pairs in your head, the palette generator at color.hivly.net shows the hex and the channel values side by side.

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 plain base-10 and separates them with commas. Neither is more “real” than the other. They convert back and forth exactly.

You will see both in CSS, and which one shows up is mostly habit and context. Hex is compact and easy to paste from a design tool, so it dominates stylesheets. The rgb() form is easier for a human to read at a glance and makes it obvious when you want to nudge a single channel. Pick whichever you find clearer for the moment. The browser treats them as the same instruction.

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 simply doubled to make a pair. #FFF expands to #FFFFFF, which is white; #F00 expands to #FF0000, pure red. The shorthand only works when both characters in every pair are the same, so #FF5733 has no three-character version. It is a convenience for round numbers, not a different system.

The longer variant adds a fourth pair for transparency, called the alpha channel. An eight-character code like #FF5733CC keeps the same red, green and blue, then uses the final pair, CC, to set opacity on the familiar 0 to 255 scale. 00 is fully transparent, FF is fully opaque, and CC is 204, roughly 80 percent. 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.

Reading a hex code at a glance

You can read most hex codes without any conversion once you know the layout. Look at the first pair for red, the middle pair for green, the last for blue, and judge each pair by how high it is. A pair near FF means a lot of that channel; a pair near 00 means almost none. #FF5733 reads instantly as high red, low green, low blue, so it is warm and reddish before you compute a single value.

This quick read is where hex earns its place, and also where it stops being enough. The numbers map cleanly to how a screen mixes light, but they do not match how the eye perceives brightness or how we think about a color in words. Two codes can differ by the same amount on paper yet look worlds apart. When you need to reason about lightness, saturation or perceptual evenness, formats like HSL or OKLCH describe a color the way people actually see it, while hex stays the compact way to store and paste the exact mix.