Firebrick, Picasso blue, viridian light – these are all very specific colors defined by very specific wavelengths of light or, more accurately, by very specific ratios of three different specific wavelengths of light – red, blue, and green. By varying the ratio of these three colors, we can create pretty much any color in the visible spectrum. But how do you tell the millions of possible colors apart? There are certain definitive names for a few of them. Nevertheless, when does one person’s interpretation of ‘pumice’ and ‘blue fern’ begin? What we need is some sort of universal language to define colors, the one that doesn’t leave any colors up to ambiguous interpretation, the one that every modern device could conceivably understand and replicate. What we need are hex codes. You might have dealt with color names and hex codes when creating your graphic design projects or generating on-brand content. And now it’s time to learn more about the magic of hex color codes and their origin.
Before talking about replicating colors, it’s a good idea to first talk about how colors on a modern display are created. Most modern screens are made of tiny picture elements, or pixels, which are made up of three color elements, or sub pixels that are each individually addressable. By changing the intensity of each color’s respective subpixel, it becomes possible to change the color of the pixel as it’s observed by the human eye – from red to blue to green or somewhere in between. If you turn everything up to full intensity, you get white. Take everything down and you get black. This is known as additive color. By adding more of a component color, it’s possible to change the hue toward that component’s color.
When we describe the capacity of a display to reproduce color information, we use the concept known as color depth. Color depth, or bit depth, is the number of bits used to indicate the color of a single pixel. Today, every color that displays is capable of reproducing can be defined by 24 bits of information. Hexadecimal numbers work very well for computers because each digit holds four bits of information. And if we put two hexadecimal digits together, we have a complete byte of information. And this brings this all back to hex codes for colors.
Hex Color Code Magic
It’s not a secret that hex codes are always six digits long. And not coincidentally six digits in hexadecimal are three bytes of information. So, what do these codes actually mean?
There are three primary colors of light represented by three subpixels in each pixel of the display. You may have seen a color indicated by an RGB value, a set of three numbers and parentheses. Each color’s intensity is represented by a decimal number between 0 and 255, which is actually the largest decimal number that can be represented by eight bits. This RGB value is actually a 24-bit number written in this clunky notation. In a hex code, each subpixel’s color is represented by a hexadecimal couplet, where the first two digits are red, the next are green, and the last two are blue. By manipulating each couplet from double zero, or zero intensity up to double F, which is full intensity, you can instruct your display to reproduce any of more than 16 million colors. Quite impressive, isn’t it? And there is a fun fact! Squishy human eyes can distinguish only about 10 million different colors. So, modern displays will actually reproduce much more colors than users can possibly perceive. But those colors are not always evenly distributed across human perception space. So, some people will notice a phenomenon known as color banding at the transition between two adjacent colors.
Make no mistake, light perception is a weird thing. And that in a nutshell is how hexadecimal codes work.