What is a hex colour code, and how do you read #2F6FED?

A designer, a brand guidelines document or the settings panel of a website has handed you something like #2F6FED. It starts with a hash, six mixed letters and digits follow, and out of it comes a colour. This guide explains what those six characters are saying.

There is a practical payoff to learning to read them: put two codes side by side and you can tell which is darker and which leans bluer without looking at a swatch. Nudging a colour lighter or darker by hand becomes possible too.

Why a colour is described with a number

Every dot on your screen is made of three tiny lights: red, green and blue. Setting the strength of each one separately produces millions of colours. "Navy" means something slightly different to everybody, but state the strength of the three lights as numbers and every screen produces the same colour.

A hex code squeezes those three numbers into one piece of writing. The hash at the front simply announces that a colour code follows; it carries no value of its own. The six characters after it split into three pairs, and each pair gives the strength of one light, in order: red, green, blue.

In other words, #2F6FED is not a name but an instruction: turn the red up this far, the green this far, the blue this far. That is why the same code means the same colour in every program and on every screen.

Taking #2F6FED apart

Split the code into three pieces: 2F, 6F and ED. Each piece stands for a strength between 0 and 255, where 0 means that light is switched off entirely and 255 means it is turned all the way up.

Written the other common way, the same colour is rgb(47, 111, 237) — exactly the same instruction in different clothes. Red is low, green is middling, blue is nearly at full: the result is a vivid blue. That is also the quick way to judge a code at a glance, by seeing which pair is largest.

Why the letters? Counting in sixteens

In everyday life we count with ten digits: 0 up to 9, then we move a column across. Hex codes count with sixteen symbols; after 9 they carry on with A rather than moving across. So A means ten, B eleven, C twelve, D thirteen, E fourteen and F fifteen.

The first character of a pair counts sixteens, the second counts ones. Take ED apart: E is fourteen, and fourteen sixteens make 224; add the 13 that D stands for and you reach 237. You never have to do this by hand — paste the code into the Colour Code Converter and all three channels come out ready.

The smallest value a pair can hold is 00 and the largest is FF, which gives 256 steps in between. The table below shows a few familiar colours read with that same logic.

Three-character codes and eight-character transparency

You will sometimes meet three-character codes such as #F00. That is a shorthand in which every character doubles itself, so #F00 really is #FF0000. By the same rule #2F6 means #22FF66 — note that this is a completely different colour from #2F6FED, not an abbreviation of it.

Eight-character codes add one more pair at the end, and that pair sets how transparent the colour is: 00 is entirely invisible, FF entirely solid. A value in between lets some of whatever sits underneath show through.

Upper and lower case make no difference; #2f6fed and #2F6FED are the same colour. Some programs do not want the leading hash at all, while others add it for you.

How do I find the code of a colour I can see?

The commonest situation is not having the code at all: the colour you want is in a photograph, a logo or something on screen. The way through is not to guess by eye but to read the value out of an image.

If the colour is on your screen, take a screenshot first. On Windows, hold the Windows key with Shift and S to select an area; on a Mac, use Command, Shift and 4. On a phone the screenshot goes straight into your photo library. Once you have an image, feed it to the tool that extracts a colour palette from an image: the dominant colours are listed as swatches with their hex codes.

One caution: a surface in a photograph is never a single value, because light and shadow shift it. The palette tool gives you an average that represents the area. If you are after one specific patch, crop the image down to it first and the answer gets much closer.

You have the code — what next?

One colour is rarely enough. The darker version a button takes when hovered, the pale tint behind a card, the faded line of a border: they are all members of one family. The Colour Shades and Palette Generator builds an evenly spaced ladder from light to dark out of a single code, so you are not guessing the steps by hand.

The second step is legibility, and that one is not settled by eye. The difference between a text colour and its background is measured as a single number; the WCAG accessibility guidelines ask for at least 4.5:1 for normal text and at least 3:1 for large headings. The Colour Contrast Checker tells you whether your pairing clears those thresholds.

The third is translation between notations. One place wants hex, another RGB, a third HSL; the Colour Code Converter gives all three at once. HSL is the one to reach for when you want to derive lighter or darker siblings of a colour by hand, because lightness is a value you can simply turn up or down.

Frequently asked questions

What is a hex colour code?

It is a six-character way of writing the red, green and blue parts of a colour in base sixteen. After the hash, the first two characters give red, the middle two green and the last two blue; each pair corresponds to a strength between 0 and 255.

How do I find the hex code of a colour in an image?

Put the image through the palette extraction tool; the dominant colours come back as swatches with their hex codes. If the colour is on screen rather than in a file, take a screenshot first and use that. Cropping to the patch you care about makes the result far more accurate.

Are #2F6 and #2F6FED the same colour?

No. In the three-character shorthand every character doubles itself, so #2F6 actually means #22FF66. The shorthand only works for codes whose pairs are already identical: #F00 genuinely is #FF0000.

Should I write hex codes in capitals or lower case?

It makes no difference — #2f6fed and #2F6FED define the same colour. Being consistent within one document simply makes it easier to read.

How do I know whether my colour is legible as text?

Measure the contrast between the text colour and its background. The Colour Contrast Checker reduces it to one number and tells you whether it clears the 4.5:1 that WCAG asks for normal text. Judging by eye is unreliable; your screen brightness alone will sway the verdict.

Last updated: August 27, 2026