What Is a Hex Colour Code?

Hex colour codes look arbitrary until you see the structure, at which point they become readable at a glance. The whole system is three numbers written in base sixteen.

The structure

A hex code is a hash followed by six characters, split into three pairs:

#  1E  90  FF
   RR  GG  BB

The first pair is red, the second green, the third blue. Each pair is a two-digit hexadecimal number running from 00 to FF, which in ordinary decimal is 0 to 255.

So #1E90FF means red 30, green 144, blue 255. That is a fairly strong blue, which is where the name Dodger Blue comes from.

Why hexadecimal

Base sixteen uses digits 0 to 9 then letters A to F for the values 10 to 15. Two hex digits express exactly 256 values, which happens to be exactly one byte.

That is the entire reason for the choice. Each colour channel is stored as one byte, and two hex digits is the most compact way to write a byte that a person can still read. Three bytes, three pairs, one colour.

Reading a code at a glance

Once you know that FF is maximum and 00 is nothing, most codes become legible.

Code	Meaning
#000000	Black, nothing in any channel
#FFFFFF	White, everything in every channel
#FF0000	Pure red
#00FF00	Pure green
#0000FF	Pure blue
#FFFF00	Red and green together make yellow
#808080	Mid grey, all three channels equal
#FF6600	Full red, some green, no blue: orange

Two rules cover most of it. Equal values in all three channels give a grey, from black at 00 through to white at FF. And the largest channel tells you the dominant hue.

The three-character shorthand

CSS allows a three-digit form where each character is doubled:

• #F00 becomes #FF0000
• #FFF becomes #FFFFFF
• #ABC becomes #AABBCC

It only works where both digits in each pair are the same, so it can express 4,096 colours rather than the full range. It is convenient for simple colours and useless for anything precise.

The eight-digit form

Adding a fourth pair sets the alpha channel, which controls opacity.

• #FF0000FF is fully opaque red
• #FF000080 is red at about 50 percent opacity, since 80 in hex is 128
• #FF000000 is fully transparent red, which is to say invisible

There is a four-character shorthand too, where #F008 means the same as #FF000088.

Hex against the alternatives

RGB notation expresses the same thing in decimal: rgb(30, 144, 255). Identical information, easier to adjust by eye, longer to write.

HSL notation uses hue, saturation and lightness: hsl(210, 100%, 56%). This is far better for adjusting a colour deliberately, because making something lighter means changing one number rather than recalculating three. Designers who need a range of tints from one base colour usually work in HSL.

Named colours such as red, tomato or rebeccapurple. There are around 140 in CSS. Readable, limited, and occasionally surprising, since some names do not look much like their names.

Hex remains the default in design tools and code mostly through inertia and compactness. It is the shortest unambiguous way to write an exact colour.

Converting by hand

To go from hex to decimal, multiply the first digit by 16 and add the second, treating A to F as 10 to 15.

For 1E: 1 × 16 = 16, plus E which is 14, giving 30.

To go the other way, divide by 16. The whole number is the first digit, the remainder is the second. For 144: 144 ÷ 16 = 9 remainder 0, giving 90.

In practice nobody does this by hand, but knowing the mechanism makes the codes stop looking like magic.

Contrast, which matters more than the code

A colour on its own is rarely the question. What matters for readable text is the contrast between foreground and background.

Accessibility guidelines set a minimum contrast ratio of 4.5 to 1 for normal text and 3 to 1 for large text. The ratio is calculated from the relative luminance of the two colours, which weights green most heavily and blue least, because human vision does.

That weighting produces results people find counterintuitive. Yellow text on white fails badly despite yellow looking bright, and mid-grey on white frequently fails even though it looks perfectly readable to someone with good eyesight in good light.

Checking the ratio takes a second and catches the cases where a palette looks fine to its designer and is unusable for a substantial number of readers.

Where the codes come from

Most people acquire hex codes rather than choose them: from a brand guide, from a design file, or by pulling the dominant colours out of an image.

That last approach is a reasonable way to build a palette that feels coherent with a photograph, and it produces codes you would never have picked deliberately, which is usually the point.

Building a palette from one colour

A practical use for understanding the structure: generating variations.

Lightening a colour means moving every channel towards FF; darkening means moving them towards 00. Doing that by hand in hex is awkward, which is why designers switch to HSL for this and adjust the lightness value alone.

The other common need is a set of colours that work together. Pulling the dominant tones out of a photograph gives a palette that already feels coherent, because the colours co-occurred in real light. Checking each resulting pair for contrast then tells you which combinations are usable for text and which are decorative only.