In the digital world, colors are not only represented by their, well, color, but also six-digit codes. These “hex codes” or “hexadecimal colors” play a very important role in design. We’ll explain how it all works.
Red, Green, Blue
A hex code is made up of six digits—usually preceded by the pound (#) symbol. For example, here is the hex code for pure black: #000000. The numbers in this code correspond to the amount of red, green, and blue in the color.
The first two digits tell us how much red is in the color, the next two digits are for green, and the last two are for blue. Black is the absence of color, which is why it’s “000000.” There’s no red, green, or blue present.
The amount of red, green, or blue can be in the range of 0-255. But wait, if each color only has two digits, and the scale goes all the way up to 255, how does that work? That does indeed present a problem. You might think pure red would be #2550000, but that’s more than six digits. Buckle up.
Number and Letters
Hex color codes do not contain only numbers. The actual code for pure red is #ff0000. So how do those letters translate to colors? It’s a little complicated.
The hexadecimal system is based on the number 16. Once you figure out how much of a color you need—on that 0-255 scale—you divide that by 16. The number you get at the top of the equation is the first digit, then the remainder is the second digit.
Now, if those two numbers are single digits, you just plug them into their spots in the hex code. However, if you end up with a double-digit number, it needs to be converted into a letter. For that, there’s a simple conversation to make:
- 10 becomes A
- 11 becomes B
- 12 becomes C
- 13 becomes D
- 14 becomes E
- 15 becomes F
To go back to pure red—which is #ff0000—we can now see that it was #15150000 before being converted to letters. A more complex color—such as this shade of purple (#5f1e85)—has more going on, but you know that any letter is simply a number greater than 9.
What Are Hex Codes For?
We now know what a hex code is, but what does it do? A hex color code tells the display what color to show. The display reads all the information about how to make that color from the code—and it does exactly that—it makes the color.
The combination of red, green, and blue can make virtually any color the eye can see. You can think of a hex code like a cooking recipe. It tells the TV, camera, computer monitor, phone display, or projector how much of each color it needs. Then it mixes them together to create the desired final color.
That’s all there is to hex color codes. They may look like a foreign language, but there’s a very specific formula that explains the meaning behind each digit. Now you know a little more about those codes you see in Photoshop and Illustrator.
RELATED: What’s the Difference between Illustrator and Photoshop?
How to Find the Hex Code for a Color
You know how a hex code is made and how they’re used, but how can you find the hex code for a color? Thankfully, there are a bunch of free online tools to find the hex codes for any color in an image.
If you’re looking for a good one, we recommend a website called image-color.com. You can upload an image from your device or a URL and use the eye-dropper tool to select a color from it. Click “Browse” to upload your own or paste a URL in the text box and click “Upload.”
Once the image is uploaded, you can click or tap anywhere to select a color from the image. The color will be displayed at the top along with the hex code in the “HEX” box.
Now you can take that hex code and use it in Photoshop, Illustrator, or wherever you need it. That’s all there is to hex color codes. They may look like a foreign language, but there’s a very specific formula that explains the meaning behind each digit. Now you know.
RELATED: What’s the Difference between Illustrator and Photoshop?
