~/articles/hex-color-codes-explained 200 OK

Hex Color Codes Explained

By Mickael Gomes · Last updated: 2026-06-19

A hex color code is a six-digit hexadecimal number, usually written with a leading hash such as #FF8800, that specifies a colour by its red, green, and blue components. The six digits split into three pairs: the first pair sets the red channel, the second sets green, and the third sets blue. Each pair ranges from 00 to FF, meaning zero to 255, so a hex colour is just three byte values packed into one compact string.

Reading the three channels

Take #FF8800. The red pair is FF, which is 255, the maximum, so red is fully on. The green pair is 88, which is 136, a bit over half intensity. The blue pair is 00, which is zero, so blue is off. Full red plus moderate green plus no blue produces a warm orange. Mixing the three channels at different intensities is how every colour on a screen is built.

Two easy anchors help you read codes at a glance. #000000 is all channels off, which is black, and #FFFFFF is all channels at maximum, which is white. A code with equal red, green, and blue values, such as #808080, is always a shade of grey.

Shorthand and eight-digit codes

CSS also accepts a three-digit shorthand where each digit is doubled. #F90 expands to #FF9900, so the shorthand is only valid when each channel pair has two identical characters. The expansion rule is simply that each single digit is repeated: the F becomes FF, the 9 becomes 99, and the 0 becomes 00. A code like #f80 is therefore exactly #ff8800, while a colour such as #FE8 has no valid shorthand because its pairs are not made of matching characters.

Beyond the classic six digits, modern CSS supports an eight-digit form, #RRGGBBAA, where the final pair is an alpha value controlling opacity. AA of FF is fully opaque and 00 is fully transparent, so #FF880080 is the same orange at roughly half transparency. There is also a four-digit shorthand, #RGBA, that doubles each digit in the same way the three-digit form does, so #F808 expands to #FF880088.

Hex versus rgb() notation

Hex codes and the CSS rgb() function describe the same colours; they are two notations for identical channel values. #FF8800 and rgb(255, 136, 0) render the same orange. Designers often prefer hex for its brevity, while rgb() can be easier to tweak channel by channel. Converting between the two is purely mechanical: each rgb channel is one hex pair, and a converter handles the arithmetic instantly in either direction.

Named colors and keywords

CSS recognises around 140 named colours, such as red, orange, and rebeccapurple, and every one of them is just a friendly alias for a specific hex value. The keyword red is identical to #FF0000, white is #FFFFFF, and black is #000000. Names are convenient for quick prototyping, but a hex code gives you the full range of more than sixteen million colours rather than a fixed, limited list, which is why production stylesheets lean on hex once a palette is settled.

One special keyword, currentColor, is not a fixed value at all: it resolves to whatever the element’s text colour currently is. Pairing it with a hex value set elsewhere lets borders, icons, and backgrounds follow the text colour automatically. Whether you reach for a name, a keyword, or a raw hex code, the browser ultimately reduces each one to the same red, green, and blue channel values described above.

Sources