Hex color is one way to represent colors on a computer.
#FCBA03
In the hex color, each color has three hexadecimal components in format #RRGGBB, where:
- RR is the red component
- GG is the green component.
- BB is the blue component.
The RR, GG, and BB components range from 00 to FF.
In other words, the color components can have numeric values from 00 to 99. And because 9 is the last one-digit number, we need to use letters from AA to FF to represent the rest of the range.
But why such a hassle? What is the benefit of hex colors? How to convert RGB to hex?
This is a comprehensive guide to hex colors and hexadecimal numbers. This guide requires no knowledge of maths, other than counting numbers. But this guide is a math-oriented one!
To take the first step towards understanding the hex colors, you need to know about the hexadecimal base system. Let’s take a look at common base systems for counting numbers.
Number Base Systems
When you count numbers, you have a numeral system to use.
For example, let’s count to ten:
1, 2, 3, 4, 5, 6, 7, 8, 9, 10
What you may not realize is you counted from 1 to 10 in a decimal system.
But to count to 10 in another base, such as a hexadecimal base, the calculation looks different:
1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10
This chapter teaches you how different numeral systems work. This is the first step to truly understanding how hex colors work.
Decimal Base
When you count numbers in your everyday life, you automatically use a decimal system. In a decimal system you have ten separate numbers to use:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
In the decimal number base, counting to nine is possible by using separate numbers. But once you go past nine, you have to start reusing the previous numbers.
For example, the number 10 is not a unique number character. Instead, it’s a combination of 1 and 0.
No matter how far you calculate in a decimal base, you will always use numbers between 0-9.
This is how the decimal system works.
The decimal base is used commonly. When someone asks you to count to ten, you don’t have to ask “In which number system?”.
But it’s important to realize there are other numeral systems too. For example, computers use binary systems. Let’s take a quick look at the binary system.
Binary Base
The binary system means you can only use numbers 0 and 1 to perform calculations. So any number can only consist of 0s and 1s.
For example, let’s count to “ten” in a binary system:
0, 1, 10
In the binary system, 10 is already the third number from 0. This is because you run out of numbers after 1.
As another example, let’s count to 7 in a binary system:
0, 1, 10, 11, 100, 101, 110, 111
A binary system is famous for being used in computers. This is because a computer uses bits as its basic building blocks. A bit can only be “on” or “off”, that is, 0 or 1. There are no other states than one of these two.
Thus, all the calculations and computations must be done with “0s and 1s”, that is, bits that are either on or off.
Next, let’s talk about another common number system called the hexadecimal base.
To learn more about the binary system, make sure to read my comprehensive guide to the binary number system.
Hexadecimal Base
A hex color uses a hexadecimal base for representing colors. Understanding how the hexadecimal number system works is essential to understanding hex colors.
Unlike the traditional decimal base, a hexadecimal base has 16 symbols for representing numbers.
The first 10 symbols are numbers from 0 to 9. And because we don’t have more numeric symbols, we must use letters. So the last 6 symbols are letters from ‘A’ to ‘F’ (or from ‘a’ to ‘f’ in lowercase).
For example, let’s count to 16 in a hexadecimal system:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10
In hexadecimal, you have 16 symbols to represent numbers. Thus you’ll need to start re-using the numeric symbols after the fifteenth symbol, F.
This is why the number 16 in the decimal base is 10 in the hexadecimal base.
To support understanding, let’s count a bit further. For instance, let’s count up to 42 in hexadecimal base:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 2A
Now that you understand what are numeric systems and hexadecimal numbers, it becomes easier to understand what is a hex color.
What Is a Hex Color?
A hex color is a color that uses a hexadecimal base to express the amount of color in each color component (red, green, blue).
A hex color is expressed in the following format:
#RRGGBB
Here:
- RR is the amount of red light.
- GG is the amount of green light.
- BB is the amount of blue light.
Each channel can have a value from 0 to 255. But because the hex colors use a hexadecimal base, the channel values range from 00 to FF.
Next, let’s discuss why hex colors are used and what is the relationship to RGB colors.
Why Hex Colors?
Hex color is another way to express colors. Instead of using a format like RGB, the hex format can be more convenient, depending on the context.
For example, here is the same color expressed first in hex and then as RGB:
- Hex: #070A1B
- RGB: 7, 10, 27
The hex color is always 6 digits in length. But an RGB color can take from three to nine digits. In this sense, a hex color follows a more consistent and shorter expression.
RGB and Hex
A computer has three primary color channels:
- Red
- Green
- Blue
These are called the RGB channels.
A computer uses these three primary colors to create any other color. This works by adjusting the level of intensity for the color channels.
Scientists have figured out that the human eye can only distinguish so many color levels. When there are more than 256 levels of the same color, the human eye cannot tell the difference.
In other words, a computer must be able to produce 256 levels of each color, red, green, and blue. This means there are 256 x 256 x 256 = 16,777,216 color combinations distinguishable by the human eye.
RGB Example 1: Green Color
To create a color with a computer, you need to specify the color level (0 – 255) for each color channel. Here are some examples:
[0, 255, 0] is green, because:
The red channel is 0, thus producing no red color.
The green channel is 255, which produces the brightest level of green color.
The blue channel is 0, thus producing no blue color.
RGB Example 2: Yellow Color
[255, 255, 0] is yellow.
The red channel is 255, which produces the brightest level of red color.
The green channel is 255, which produces the brightest level of green color.
The blue channel is 0, thus producing no blue color.
When combined, red and green produce yellow.
RGB Example 3: Dark Green Color
[30, 100, 30] is green with a dark shade.
The red channel is 30, which means there is a little red color in the mix.
The green channel is 100, which means there is more green than red.
The blue channel is 30, which means there is the same amount of blue as red.
If all the channel values were equal, the result would be gray. But because there is more green than red and blue, the resulting color has a green tone to it.
This is the commonly used RGB representation of colors. But sometimes this notation is not the most convenient one.
Hex Colors for Convenience
To create an alternative way to represent these 256 x 256 x 256 RGB colors, you need to get clever.
Think about the number 256. It is exactly 16 x 16. This means each color channel could be represented with two hexadecimal (16-base) numbers instead of three decimals.
This lays the foundation for hexadecimal colors. Instead of representing each color channel with a three-digit decimal number, a two-digit hexadecimal number is used.
The format for hexadecimal numbers is:
#RRGGBB
Where:
- RR is the intensity of the red channel from 00 to FF
- GG is the intensity of the green channel from 00 to FF
- BB is the intensity of the blue channel from 00 to FF
In the previous section, you saw examples of RGB colors. Now, let’s take a look at those colors again.
This time, pay attention to the HEX value of the colors.
Hex Color Example 1: Green Color
#00ff00 is green, because:
The red channel is 00, thus producing no red color.
The green channel is ff, which produces the brightest level of green color.
The blue channel is 00, thus producing no blue color.
Hex Color Example 2: Yellow Color
#ffff00 is yellow.
The red channel is ff, which produces the brightest level of red color.
The green channel is ff, which produces the brightest level of green color.
The blue channel is 00, thus producing no blue color.
When combined, red and green produce yellow.
Hex Color Example 3: Dark Green Color
#1e641e is green with a dark shade. Unlike the previous hex colors, now it’s impossible to tell the color by only looking at the color code (unless you have worked with hex colors or hexadecimal values in the past).
The red channel is 1e, which means there is a little red color in the mix.
The green channel is 64, which means there is quite a bit more green than red.
The blue channel is 1e, which means there is the same amount of blue as red.
If all the channel values were equal, the result would be gray. But because there is more green than red and blue, the resulting color has a green tone to it.
This leads to an interesting question: How to convert Hex to RGB? The truth is you don’t have to learn how to do this. But it can help you understand hex colors better.
The next chapter teaches you how to convert hex colors to RGB.
How to Convert Hex to RGB
As you learned earlier, a hex color is a 16-base system to represent the intensities of the red, green, and blue channels.
- The first two digits represent the intensity of the red channel.
- The second two digits represent the intensity of the green channel.
- The last two digits represent the intensity of the blue channel.
To manually convert a hex color to RBG, you have to:
- Split the hex color into the three values that represent the RGB color components.
- Count up to 255 on a hexadecimal basis until the value matches your hex channel values.
So it only requires counting.
Let’s see an example.
Example
Convert the hex color#070A1B.
First, let’s split the hex color into the red, green, and blue components. These are:
- 07
- 0A
- 1B
From this point on, all you need to do is count numbers starting from 0 until you reach these values.
07 (or just 7) is 7 in both hexadecimal base and decimal base. So the red component has a value of 7 in RGB.
0A (or just A) is the tenth number on a hexadecimal basis. So it’s the number 10 on a decimal basis.
1B requires counting. Let’s start counting numbers on a hexadecimal basis until 1B:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B
1B appears to be the 27th number when counting in hexadecimal base. Thus, 1B is 27 on a decimal basis. So the amount of blue component is 27.
So the hex value of #070A1B is [7, 10, 27] in RGB.
Notice that other than practicing for fun, you shouldn’t ever convert hex colors to RGB by hand. Instead, you can use an online color converter or one in your graphic design software.
HEX vs RGB: What Is the Difference?
Common Hex Color Values
Wrap Up
Today you learned what hex colors are.
To put it short, hex is just another way to represent colors.
In computers, any color is composed of three components: red, green, and blue. These colors are called RGB colors. Each RGB channel can have a value from 0 to 255. These levels are used to create different colors.
Each RGB color can be represented in a hex format.
Hex is for convenience. Instead of using three 3-digit numbers between 0-255, you use three 2-digit numbers between 00 and FF in the hexadecimal base.
- RGB follows the format: RRR, GGG, BBB. For example, 255, 210, 210.
- Hex follows the format #RRGGBB. For example #FFD2D2.
The hex colors use the hexadecimal numeral system to represent the amount of color for each channel (red, green, blue). Compare this to RGB which uses the traditional decimal base we use every day.
In the hexadecimal base, there are numeric characters for the first 16 numbers.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
So the number 13 in the decimal base is D in the hexadecimal base.
This is why there are letters in the hex colors.
Thanks for reading!