How Hex Color Codes Work

How Hex Color Codes Work

Where does one person’s interpretation of a color end and another person’s begin? How do we universally define colors displayed on modern screens? What is the equivalent of Pantone for digital documents? In this video, we’ll explore how color is displayed on modern LCD/LED screens before going into depth on how hexadecimal color codes work as a technological standard to convey color information.

Get the Arduino code, bill of materials, and more on

Check out the rest of Project ColorTyme here

This video is part of a project for the element14 community. The electronics and engineering community where you can connect and collaborate with top engineers from around the world. Join now at element14 dot com, link in the doobly-doo!

Firebrick5 [#8E2323]

Picasso Blue [#0276FD]

Viridianlight [#6EFF70]

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 ratios of these three colors, we can create any color in the visible spectrum, but how do we tell all the millions of possible colors apart? We have definitive names for a few of them, sure, but when does one person’s interpretation of pumice [#78A489] end and blue fern [#759B84] begin?

We need some kind of universal language for defining colors. One that doesn’t leave any colors up to ambiguous interpretation. One that every modern device could conceivably understand and replicate. What we need are hex codes.

Greetings, Programs. Atari here, you there, and if you like learning about technology while building goofy projects around the shop, then go ahead and subscribe to this channel. Tally-ho!

Before we start talking about replicating colors, we should probably start by talking about how colors on a modern display are created. Most modern screens are made up of tiny picture elements–pixels–which are actually each made up of 3 color elements (or subpixels) that are each individually addressable.

Note that this is not the case when it comes to CRT displays. They employ an entirely different technology that we won’t be exploring in this video. If you want to learn about how CRT images are formed, Technology Connections has a fantastic piece all about it!

Anyway, pixels are each made up of 3 subpixels–one for each of the primary colors of light. By changing the intensity of each color’s respective subpixel, we can change the color of the pixel as observed by the human eye.

From red

To blue

To green

Or somewhere in between

Of course, if we turn everything up to full intensity, we’ll get white. Take everything down and we get black.

This is known as “additive color”: By adding more of a component color, we change the hue toward that component color.

Yes, this is a very rudimentary explanation of how additive color works, and I’m purposefully not going too in-depth because a discussion on color theory is really outside of the scope of this video. If you’re interested in that topic, leave me a note in the doobly-doo, and I’ll see what I can do. For now, I just want to provide a little context to facilitate the topic at hand.

Now, that brings me to the next point in this discussion. When we describe the capacity of a display to reproduce color information, we use a concept known as color depth. Color depth, or bit depth, is the number of bits used to indicate the color of a single pixel. As of 2018, nearly every display being manufactured is capable of displaying what’s known as “True Color” or 24-bit color. This means that every color the display is capable of reproducing can be defined by 24 bits or 3 bytes of information.

Are you still with me? Because this is where it all comes together.

Remember in the last video where we talked about how hexadecimal numbers work and why we use them in computing? You can watch the video up in the corner if you missed it.

Hexadecimal numbers work really well for computers because each digit holds 4 bits of information. If we put 2 hexadecimal digits together, we have a complete byte of information. That brings me back to these so-called “hex codes” for colors.

You may have noticed that hex codes are always six digits long. Six digits in hexadecimal is 3 bytes or 24 bits of information. So what do these codes mean? Let’s go back to 24-bit color.

We know that with 24 bit color, we have 3 bytes of color information. We also know that there are 3 primary colors of light represented by 3 subpixels in each pixel of the display. Are you starting to see a connection?

Now, you may–at some point–have seen a color indicated by an RGB value, a set of three numbers in parenthesis. This is a mathematical array that contains the respective intensities of the red, blue, and green subpixels. Each color’s intensity is represented by a decimal number between 0 and 255.

Why 255? Because it’s the largest decimal number that can be represented by 8 bits. That RGB value is actually a 24-bit number that’s written in an extremely clunky notation, but in engineering, we’re always looking for a way to make things more efficient. As such, we can fairly easily convert these three decimal numbers into three hexadecimal couplets and save quite a lot of typing down the road!

So in a hex code, each subpixel’s color is represented by a hexadecimal couplet: the first two digits are red, the next are blue, and the last two are green. By manipulating each couplet from double zero (zero intensity) to zero F (half intensity) to double F (full intensity), we can instruct a display to reproduce any of the 16 million 7 hundred 77 thousand 2 hundred 16 possible 24-bit colors.

Now for a fun fact: our squishy human eyes can only distinguish about 10 million different colors, so modern displays will actually reproduce more colors than we can possibly perceive, but those colors aren’t always evenly distributed across our perception space so some people will notice a phenomenon known as color banding at the transition between two adjacent colors. Light and perception is weird, man!

That, in a nutshell, is how hexadecimal codes work. Over the next several videos, I’ll be putting this information together with some electronics to build a rather interesting gadget, so be sure to subscribe and click the bell so you don’t miss out!

Connect with me on the social media and get sneak-peeks of projects in progress. Links are in the doobly-doo.

Up here is a video that YouTube thinks you’ll probably enjoy.

And the show notes for this episode are somewhere around here.

My name is Atari and until next time remember: It’s okay. It’s just a prototype.

Tally-ho, y’all!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.