How to Read Hex Color Codes

Whether you are a digital artist who works with Adobe Creative Suite, in a 3D application, or through UX design, you’ve probably used hex colors. But even if you use hex every day, there is a good chance you might not really understand what’s going on with those letter/number combinations. That’s where this handy guide to reading hex color codes comes in.

Hex color codes are one type of HTML color code that you’ll often hear referred to as hexadecimal color or hex. The reason to use hexadecimal numbers is it’s a human-friendly representation of values in binary code.

Hex color codes start with a pound sign or hashtag (#) and are followed by six letters and/or numbers. The first two letters/numbers refer to red, the next two refer to green, and the last two refer to blue. The color values are defined in values between 00 and FF (instead of from 0 to 255 in RGB).

Numbers are used when the value is 1-9. Letters are used when the value is higher than 9. For example:

• A=10

• B=11

• C=12

• D=13

• E=14

• F=15

To get a hexadecimal color, follow these three steps:

1. Multiply the first number by 16.

2. Multiply the second number by 1.

3. Add the two totals together. 

A good place to start before moving on to reading hex color codes is learning how to understand RGB colors. RGB numbers are based upon monitor settings of red, green, and blue light. By changing the RGB numbers, you’re telling your monitor how much of that particular light color you want to shine.

In the RGB color system, colors are presented like this: 

RGB(255, 0, 0)

RGB defines the values of red (the first number), green (the second number), or blue (the third number). The number 0 signifies no representation of the color and 255 signifies the highest possible concentration of the color. 

So, in the above example, you get the brightest red possible without any green or blue presented. If you wanted only green, you’d use RGB(0, 255, 0) and for blue, RGB(0, 0, 255). For other colors, you’ll use a combination of color values to achieve the look you want.

By understanding what the numbers stand for in hex color codes, you'll be able to better predict what color you might see. There's not too much of a difference between using a hexadecimal or RGB color, except that in CSS, it's possible to also add an alpha value, so you'll really have a RGBA color.

This can be super helpful if you want to control the opacity of a color. Adding an alpha value to your RGB is certainly one of the easiest ways to change opacity.

Once you really understand RGB you can move on and learn how to read hex codes. It’s really quite simple once you know the formula. As mentioned above, values 1-9 are stated numerically. However, for values that are 10 and higher, letters replace the numbers. So, A=10, B=11, C=12, and so on.

Now, to calculate the hexadecimal number, there are three quick steps (as also stated above):

1. Multiply the first number (or converted number from the letter) by 16.

2. Multiply the second number (or converted number from the letter) by 1.

3. Add those two totals together to get a single value. 

For example, the hexadecimal number for the number 83 is actually 131. We come to this conclusion by:

1. Multiplying the 8 in 83 by 16 (8x16=128).

2. Multiplying the 3 in 83 by 1 (3x1=3).

3. Adding the two totals together (128+3=131).

Another way to think of it is:

(8x16) + (3x1) = 131

Working with letters is the same concept. For example, FF = 255 because you multiply the number that represents F (15) by 16, then multiply the number that represents the second F (15) by 1. Then add the two totals together to equal 255. Recognize that the number 255 is the same as the RGB number 255, which is bright red.

If you would rather not perform mental calculations, use an RGB to HEX conversion tool.

Once you understand the numbers, you’ll be able to predict what a color will look like based upon the intensity of red, green, and/or blue values. So, if you know that maximum red without green or blue is #FF0000, then you can mentally adjust the values a bit to get an estimate for a different color. 

Another example of a hex color code is #7DD0D7, which gives you a greenish-blue.

It can be helpful to memorize some of the most common hex color codes, not only for when you want to use those exact colors but to help you better predict what other colors will be when seeing a hex color code.

• Red = #FF0000 = RGB(255, 0, 0)

• Green = #008000 = RGB(1, 128, 0)

• Blue = #0000FF = RGB(0, 0, 255)

• White = #FFFFFF = RGB(255,255,255)

• Ivory = #FFFFF0 = RGB(255, 255, 240)

• Black = #000000 = RGB(0, 0, 0)

• Gray = #808080 = RGB(128, 128, 128)

• Silver = #C0C0C0 = RGB(192, 192, 192)

• Yellow = #FFFF00 = RGB(255, 255, 0)

• Purple = #800080 = RGB(128, 0, 128)

• Orange = FFA500 = RGB(255, 165, 0)

• Maroon = #800000 = RGB(128, 0, 0)

• Fuchsia = #FF00FF = RGB(255, 0, 255)

• Lime = #00FF00 = RGB(0, 255, 0)

• Aqua = #00FFFF = RGB(0, 255, 255)

• Teal = #008080 = RGB(0, 128, 128)

• Olive = #808000 = RGB(128, 128, 0)

• Navy = #000080 = RGB(0, 0, 128)

Find more hex color codes or pick an HTML color and get its coinciding name and codes.

The quickest way to choose a color scheme for your project is to use a color palette tool that allows you to search groupings by:

• Color

• Style

• Keyword

• Hex value

• Schemes based on what is trending or popular

The same tool allows you to generate your own scheme by randomly picking and locking in colors that you like and that look good together. 

Once you have chosen a color scheme, you can:

• Create a collage

• Explore and create a gradient

• Check the contrasts

• Adjust the hue, saturation, brightness, and temperature

Each color is assigned a hex color code for you to use. In the end, you’ll have a custom color scheme that perfectly personifies your project.

But, before you settle on a palette, remember these color design tips:

• Consider the context.

• Refer to the color wheel.

• Choose a monochromatic, triadic, or split complementary color scheme.

• Think beyond the presets.

We know you have more questions about hex colors, which is why we’ve put together this quick-reference FAQ section.

Hex is short for Hexa, which is Greek for the number six.

While both systems work, consistency is of utmost importance. When designing for a specific brand, check their brand guide regarding which system to follow and convert colors accordingly.

There are many free online color picker tools that make it very easy to get the hex color code for a specific image. 

Generally, all you have to do is either paste in an image URL or upload your image into the color picker tool and select a color pixel. You’ll get the hex color code and RGB values. 

To change the hex color in Adobe Illustrator, follow these steps:

1. In a new Illustrator document, press F6.

2. Double-click the stroke or fill box in the Color window.

3. Double-click inside the box next to the #.

4. Type the new hex color code into the box.

5. Click OK.

We’ve given you a bunch of useful tools throughout this guide, so here they are again in one place:

• Hex to RGB conversion tool

• HTML color codes

• Another HTML color code chart

• Color palette tool

• Color design tips

• Color picker

• CSS hex color tool

To wrap it all up, here are a few reminders:

• Hex and RGB color types are for onscreen use when designing websites.

• In CSS, it’s possible to add an alpha value to control the opacity of a color. 

• For a brand, consistency of color is key.

• Always strive to learn more about your work by reviewing resources and taking courses, both offered by Pluralsight!