Hex to Color

What this tool does

You have run into a hex code somewhere, in a stylesheet, a design file, a message from a colleague, and you have no idea what colour it is. A string like #6A5ACD tells a computer exactly what to show, but it tells a human almost nothing. You cannot picture it until you see it.

That is what this does. You give it a hex code, and it shows you the actual colour, rendered as a swatch you can look at, so the mystery code becomes a colour you can recognise. It is the quickest way to answer the simple but constant question of what a given hex code actually looks like.

How to use it

1. Paste your hex code. Drop it into the field, with or without the hash, or set one with the colour picker.
2. See the colour. The tool displays the colour your hex code represents straight away, as a swatch you can view full size.
3. Take what you need. Use the preview to identify or check the colour, and read off its other values if you want them too.

Both the full six-character code and the short three-character form work, and the hash is optional, so a code copied from anywhere should display without fuss.

How it works

There is no real conversion involved here, which is the neat part. A hex code already is a colour, written in the language a screen understands, so the tool simply reads the code and paints it. The colour parsing is handled by TinyColor, which validates the code and turns it into the colour your display shows.

That directness is worth appreciating. Unlike converting to print inks or to a different colour model, turning a hex code into a colour asks nothing more than interpreting it, because the code and the colour are two views of the same thing. The screen does this thousands of times for every web page you load; the tool just does it for one code at a time, in the open, so you can see the result.

What a hex code is

A hex colour code is a six-character string, usually written with a hash in front, like #1E90FF. Those six characters are three pairs, and each pair sets the amount of one primary colour of light: the first pair is red, the second green, the third blue. Each pair runs from 00, meaning none of that colour, up to FF, meaning the full amount.

The characters look odd because they are written in hexadecimal, a counting system with sixteen digits rather than ten, using 0 to 9 and then A to F. That is simply a compact way to write a number from 0 to 255 in two characters. So a hex code is nothing more exotic than the red, green, and blue brightness of a colour, packed into a short, screen-friendly form. The short three-character version is the same idea abbreviated, with each character standing in for a doubled pair.

Why seeing the colour matters

The whole point of rendering a hex code is that the code is unreadable to people. Even an experienced designer cannot reliably look at #708090 and know it is a soft blue-grey, because our eyes do not think in hexadecimal. The numbers describe the colour precisely, but they do not let you picture it.

Showing the actual swatch is the only way to close that gap. It turns an abstract value into something you can judge, compare, and recognise, which is exactly what you need when you are trying to identify a colour from code or check that a value is the colour you expected. Seeing beats decoding every time.

Why turn a hex code into a colour

Most of the time the reason is identification. You have inherited a codebase, opened someone else's design file, or been sent a hex code with no description, and you need to know what colour you are actually dealing with before you can use or change it.

It is also useful for checking and previewing. Before you commit a hex code to a design, seeing it rendered confirms it is the colour you intended rather than a typo, since a single wrong character can produce a completely different colour. And over time, glancing between codes and their colours quietly builds your instinct for reading hex, which makes you faster at the whole business of working with colour on screen.

Reading a hex code by eye

With a little practice you can read the rough sense of a hex code without any tool, which is a handy skill. The trick is to look at the three pairs as red, green, and blue, and to remember that FF is full and 00 is none. So #FF0000 is pure red, #00FF00 pure green, and #0000FF pure blue, while #FFFFFF, all channels full, is white and #000000 is black.

From there you can estimate. When all three pairs are roughly equal you are looking at a grey, lighter as the values rise. A code that is high in the first and second pairs but low in the third leans yellow, since red and green light combine to make it. You will not name the exact shade by eye, but you can usually get the family right, and the tool is there for the moment you need certainty.

Questions people ask

How do I know what colour a hex code is?

Paste the code into the tool and it renders the colour as a swatch. Because a hex code already describes a screen colour directly, no real conversion is needed, just displaying it.

Do I need the hash symbol?

No. The hash is optional, and both the full six-character and short three-character hex forms work, so a code from any source should display correctly.

What is a three-character hex code?

It is a shorthand where each single character stands for a doubled pair, so #1AF means the same as #11AAFF. It is a compact way to write certain colours, and it renders just like the full form.

Can I get the colour's name too?

Seeing the swatch tells you the colour, and if you want a name for it, a hex-to-colour-name tool will give you the closest named match, since most exact hex codes do not have an official name of their own.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. Web colors, hex triplets and how they encode red, green, and blue. Wikipedia. https://en.wikipedia.org/wiki/Web_colors
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor