Learning to Convert Hexadecimal Colors and Codes

The six-digit hexadecimal codes used in creating website colors are actually three pairs of digits.

The first two numbers represent red. The middle two give the value for green. The last two are for blue.

The hexadecimal system is a base sixteen numerical system rather than a "base ten" system like the one we use.
This is how you count using hexadecimal numerals (the top line, in purple, is hexadecimal):

As you can see from the example, a "10" in the hexadecimal system is equivalent to sixteen.

When you count by increments of "10" using hexadecimal numbers, you are counting in increments of sixteen.
That's because there are six more "numbers" - in this case, it's letters - in the hexadecimal counting system.
After 0 through 9, you have A, B, C, D, E and F.

Those six extra "numbers" are the difference between our base ten and the base sixteen of hexadecimal counting.

This is how it converts to our numerical system (purple line on top is hexadecimal):

For website colors. each pair of hexadecimal digits represent a number from zero to 255.

This chart shows the hexadecimal equivalent of those numbers (the red-violet numbers represent our base ten numerical equivalent):

All hexadecimal color codes have six digits. That's because we're actually looking at three pairs of digits representing red, green, and blue:

Let's take the website color code, CA37E5, as an example. Look at the chart, and you will see that the hexadecimal number, CA, is the equivalent of 202. That's the value for red. With zero meaning no red and 255 being the maximum, that gives you an idea of the amount of red that 202 represents.

The middle pair of digits in the hexadecimal code, CA37E5, represents green which, in this case, is 37. That number converts to 55 in our number system. That's a value of 55 out of 255 for the green component in this website color.

The last pair of digits represents blue. That numbers, E5, is the equivalent of 229 which you can find on the conversion chart.

Putting it all together for the website code, CA37E5, red has an intensity of 202 out of a possible 255. Green is 55, and blue is 229.

You can convert any hexadecimal color code using the chart above. Take the first two digits and find the hexadecimal equivalent. That's the value for red. Convert the middle two digits to get the value for green. Then, check for the equivalent of the last two to find the value for blue.

Using the color code 237181 as an example, red is 23, 71 is green, and blue is 81.
For more red, increase the 23 to a higher number. For less red, decrease it.

The blue is controlled by the middle pair of digits - in this case, it's 71.
For more blue, change it from 71 to a higher number.
If you want less blue, use a lower number.

Do the same for green which is the last pair of digits - 81 in this example.

Learning to Tweak Color Codes

Once you convert each six-digit hexadecimal number to red, green, and blue, it's much easier to understand.
Then, you can tweak color codes from website color charts like the one below:

Think of it as turning a color's "volume" up or down. If you want more red, make the first number higher.
If you want to tone down the red, decrease the first number.

Make the same "volume adjustment" for green by adjusting the middle two digits.
A higher number gives you more green; a lower number means less green.

If you want to adjust the amount of blue, raise or lower the the last pair of digits.

Higher values for each of the three sets of two-digits will give you a lighter color.
Lower values will create a darker shade.

To get a more neutral tint, adjust each pair of numbers so that they are closer to each other.

For a bolder and brighter color, increase the difference between each number.

If you're already familiar with the RGB color model, an easy way to tweak and create new colors is to adjust each pair of digits and give them their respective RGB value (red for the first two digits, green for the middle two, and blue for the last two digits) .

Once you decide on the final color, convert your choice to its hexadecimal equivalent using the conversion chart near the top of this page.

Hexadecimal color codes make it possible to create over 16 million different colors. So, even the most ambitious palettes will barely give you a sampling. And, really, it's much simpler to use a smaller palette that covers the spectrum, choose an approximate color, and tweak it to your satisfaction.