Hex Color Codes Explained

Hex color codes are all around the web. They're just 6 characters—sometimes letters, sometimes numbers—yet they seem to cover all the colors. Let's take a look at how they work!

Colors are how we perceive visible light.

Each photon of light has a wavelength, and its location on the spectrum is determined by its wavelength.

Color is just light at a specific wavelength entering our eyes.

Visible light can enter our eyes in two ways:

1. Directly from a light source
2. Reflected off of an object

Additive vs. Subtractive

These two ways bring us to the two types of color mixing: additive and subtractive.

Subtractive deals with removing specific wavelengths from incoming white light, such as from the sun or a lightbulb. A red object will be red because it absorbs (i.e., subtracts) blue and green light. When the light bounces off of it and reaches your eyes, red light is left.

Additive deals with combining different colors to produce more light.

When dealing with colors on a computer screen, we're dealing with additive.

Additive = R + G + B

Specifically, we are talking about the RGB color model, which deals with combinations of red, green, and blue light. These are the three colors that the light-sensitive cones in our eyes react most to. The three colors are added together in various ways to reproduce a broad array of colors.

Each pixel on a screen is actually a group of three light bulbs: one blue, one red, and one green. The lights are so small that the light they emit interferes with each other, making each pixel look like a single color to our eyes.

To emit purple, the screen should emit red and blue lights together.

Channel intensity

In RGB, each color channel can have an intensity value between 0 and 255. Why 255? 255 is the largest number that can be represented by 8 bits, which is the number of bits used to represent each color channel in a computer.

Values in Hexadecimal

While decimal is the base-10 number system (0-9), hexadecimal is the base-16 number system. It uses 16 symbols to represent values: 0-9 and A-F.

If we use two of these symbols per channel, we can represent 256 different values (0-255) for each channel.

Hex code

A hex triplet is a set of three pairs of hex values, one for each channel. They are often preceded by a hash symbol.

Bonus 1: Alpha Channel

Sometimes you'll see an additional two digits at the end of a hex code. This is called the alpha channel, which represents the opacity of the color. 00 is completely transparent, and FF is completely opaque.

Bonus 2: Shorthand Form

If all three channels happen to have the same value, you can use the shorthand form. For example, #FFFFFF can be written as #FF.

Conclusion

Now you should be able to look at a color hex code and have a good idea of what it represents. The history of color models and their digital representations goes deep and way beyond what is covered here, but hopefully this gave you a good surface-level overview. Don't take any pixels for granted!