What Are Hex Colors in Website Design?

Jim Sweet / May 21, 2019

, ,

Colors play a huge role in establishing the tone and identity of your brand and website. During the process of designing your logo or brand colors, you might come across the term “hex colors.” But what are hex colors? Hex color codes are used in web design, and help developers achieve the exact color combinations desired.

What are hex colors?

Techopedia defines hex color codes as “a way of specifying color using hexadecimal values.” Hex color codes begin with a “#” sign and are followed by a combination of six letters and numbers that refer to a specific shade of color. For example, the hex code for white is #ffffff, while the hex code for black is #000000.

The power of hex codes lies in the ability to edit the code to yield incredibly specific shades of color. For example, you can make a slight edit to the code for white, resulting in an off-white color. Using #eeffff adds a hint of blue to your original purely white shade.

The alternative to hex colors is using generic color names like red, orange, and blue. These might get you the right general colors, but won’t give you the exact shade that represents your brand colors. You can use a resource such as color-hex.com to discover specific color codes that align best with your brand.

How are hex codes used in web design?

You can use hex codes within your HTML if you want to edit the color of individual elements.

For example, <;font color=”#8e0e0e”>;TEXT<;/font>; will change the color of the rendered “TEXT” to a specific shade of red.

However, this is not the preferred method of altering the colors on your website. You are better served using hex codes within your cascading style sheets (CSS) or custom CSS to edit the color of individual site elements across your pages. To illustrate, look at the custom CSS here:

Custom CSS without a hex color code, for illustration

Notice how the color is simply orange instead of a hex code? If there is a specific shade of orange that you want, you can locate the exact hex code and use it instead. For example:

.site-content {

background: #FFc100;

}

This minor edit yields a lighter shade of orange than what you see with the standard web shade. These subtle alterations can be the difference between getting close to your intended tone and perfecting it.

Create your new blog or website for free

Get Started