how to find your color hex

Updated 9/2/2020

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:

Multiply the first number by 16.
Multiply the second number by 1.
Add the two totals together.

Whether you are a digital artist who works with Adobe Creative Suite, in a 3D application, or through web design, you've heard of and probably used hex colors. And 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 or how they actually create color.

That's where this handy guide to reading hex color codes comes in.

Understand RGB Color to Help You Understand Hex Color Code

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.

If you understand the RGB color system, you know that 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.

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.

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 an RGB to HEX conversion tool.

Predicting Colors

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 Color Codes and Their RGB Equivalents

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.

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 Hexadecimal Colors

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

Does hex mean 6?

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

When Should I Use Hex and When Should I Use RGB?

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 Specific 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 Lighten or Darken a Hex Color?

The easiest way to lighten or darken a hex color is by utilizing a CSS hex color tool. All you have to do is:

Input the 6-digit hex color.
Select the Lighten or Darken radio button.
Assign a percentage.
Click submit.

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.

Wrapping It Up

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.
A few tools can really help with your color codes:
- RGB to hex
- Hex color codes and HTML picker
- Color palette generator
- Image color picker
- Lighten or darken hex color
- Color palettes
Always strive to learn more about your work by reviewing resources and taking courses, both offered by Pluralsight!

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.