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.
What is a hex code?
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.
What do the numbers and letters in a hex code mean?
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:
Multiply the first number by 16.
Multiply the second number by 1.
Add the two totals together.
Understanding Hex to RGB for Context
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.
What are RGB color codes?
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.
Difference between Hex color codes and RGB codes
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.
How to read hex color codes
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):
Multiply the first number (or converted number from the letter) by 16.
Multiply the second number (or converted number from the letter) by 1.
Add those two totals together to get a single value.
Example hex color code calculation
For example, the hexadecimal number for the number 83 is actually 131. We come to this conclusion by:
Multiplying the 8 in 83 by 16 (8x16=128).
Multiplying the 3 in 83 by 1 (3x1=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 anRGB to HEX conversion tool.
Estimating hex codes in the real world
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.
Common Hex to RGB conversions
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.
Beyond hex color codes: Choosing a color scheme
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.
FAQs about hex color codes
We know you have more questions about hex colors, which is why we’ve put together this quick-reference FAQ section.
What does 'hex' mean?
Hex is short for Hexa, which is Greek for the number six.
When should I convert hex to RGB (or vice versa)?
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.
How do I get the hex color code for a color in an image?
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.
How do I change the hex color in Adobe Illustrator?
To change the hex color in Adobe Illustrator, follow these steps:
In a new Illustrator document, press F6.
Double-click the stroke or fill box in the Color window.
Double-click inside the box next to the #.
Type the new hex color code into the box.
Click OK.
Hex color tools in this guide
We’ve given you a bunch of useful tools throughout this guide, so here they are again in one place:
Wrapping up hex color codes
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!
