In tech terms, hex codes are defined as this:

A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation.

In layman’s terms, hex codes are these guys —

The six numbers with # in the front.

hexcodes (1)

Color names are not the same to all people. When I think of blue I imagine a ton of different colors because I’m a designer. ‘Blue’ is not specific enough for me. When my boyfriend thinks of blue it’s navy because that’s his favorite color.

In CSS there is a non-precise way of adding a color such as:

background-color: blue;

Obviously this isn’t going to give you the exact blue that is in your branding because it has no idea what that exact shade of blue is. That’s where hex codes come in.

This is a specific color of blue that will never change when you use the same number sequence every time:

background-color: #DDEEFF;

This is why when a designer gives you specific hex codes in your style guide, it’s so important to use those codes and not just guess at it, so that your branding stays consistent.

To enter your hex codes is really easy. Any time there’s a color palette to pick from, there is an option for “custom” colors. You just click that and it will let you enter the code, then like magic…you’re exact color appears.

For example, this is in the WordPress text editor of this post —

hexcodes2

Click custom. Then this box will pop up and you can enter your hex code —

hexcodes3

Most sites where you can enter custom codes looks very similar to this. Just look for the # and blank space after. It will usually be pre-filled with 000000 for black. If it doesn’t have the #, you will need to add it in with the numbers but if it’s already there, like above, you just have to add your 6 numbers in and hit OK.

How do you find new hex codes without the help of a designers style guide? If you have Photoshop you can select the ‘color picker’ and it will show you the hex color if whatever color you choose in the image you have open. If you don’t have Photoshop, there are several ways to get hex codes but my favorite is the chrome extension ColorPick Eyedropper. Here’s a GIF tutorial I created to show you how to use it —

ezgif.com-video-to-gif (10)

 

I hope you found this helpful. If you have more tips or questions please comment below.

signature for blog