Hexadecimal Colour Codes Explained

RGB_illumination

No web developer can go a day without encountering any method of representing colour on the web. There are many ways of representing colour, some have advantages and disadvantages over others, but of course, the vastly popular and most well-known option is hex colour codes.

Across the internet, you'll find many tables offering a visual representation of selected hex codes, sometimes even with colour pickers, often with many other helpful features. However, I thought it would be interesting to learn about how these mysterious codes actually work.

How do they work?

When you first came across a hex colour code such as #0FCA3E during your adventures in learning web design, you probably thought that it would be painful to have to memorize all of these seemingly random codes. But like (almost) everything, there is some sort of order behind the perceived chaos.

When viewing an image on a computer screen, the individual pixels are displayed using the RGB colour model. This is an additive colour model, meaning that varying degrees of different colours of light (red, green, and blue in this case) are mixed together to produce a wide array of different colours.

This can be easily seen in LCD displays. If you look very closely, you'll be able to see that each pixel is divided into three subpixels, each of which display either red, green, or blue light, which go together to form a full pixel. In the image to the right, you can see three subpixels, each displaying the colour at its full intensity, which a user would see as white when sitting at a reasonable distance away from their monitor.

How do we control this?

We can control how colours are displayed by using, you guessed it, hex colour codes. These codes can look very cryptic at first, but once you understand them, it's really quite simple.

Every hex colour code is a six-digit hexadecimal number consisting of three parts. Each of these parts represents the intensity of the red, green, or blue light, respectively. This is called a hex triplet.

Each part of a hex triplet is represented using the hexadecimal number system. This system uses the digits 0-9, and it continues with A representing 10, B for 11, up to F, for 15. This is used because two hexadecimal digits can represent exactly one byte of information, which makes it easy for computers to work with.

Because one byte of information can have 256 possible values, and each hex triplet is three bytes long, the number of colours that can be represented using hex codes is 16,777,216, or 2563.

Because a picture is worth a thousand words (even if it's a picture of text), here is a quick example of a couple hex triplets, with their decimal representations.

A couple examples of hex colour codes with their decimal representations.

Well now that you know how hex colour codes work, with some practice it should be easy to read and understand any hex triplets you may come across. If you're feeling confident, you can give this game a try: What the hex.

Thumbnail source

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

One Comment

  1. July 1, 2010

    Nice combination of colors!!! Thanks for the post!!☺