A Beginner's Guide to HTML Color Codes

Adding color to your site can evoke emotion, set the ambiance, and make your overall design more cohesive.

In this post, we’ll cover everything you need to know about design principles related to HTML color codes so you can update and add to the colors on your site. Whether you’re redesigning your website or choosing a color palette for the very first time, learning this essential skill can help you create a site that reflects the look and feel of your brand consistently.

Let’s start by defining what HTML color codes are.

HTML Color Codes

We see colors everyday and have names for them, like red and yellow. Within these colors are hundreds of different shades that we also have names for. There’s not just pink, for example, but neon pink, bubblegum pink, rose, fuchsia, magenta, and countless others.

The problem is, even as we try to get more specific, these color names can be interpreted differently by different people. One person’s neon pink might be another’s fuchsia, which might be someone else’s magenta.

To avoid this imprecision online, we use HTML color codes. Computers can interpret HTML color codes to display the appropriate color. These codes can come in a variety of formats, including Hex color codes. Let’s take a closer look at this format below.

HTML Hex Color Codes

Hex color codes is the most popular HTML format used in websites and other software applications. Every hex code is made up of three byte hexadecimal numbers preceded by a hashtag.

A byte is a pair of characters in the Hex code that represent the intensity of the three primary colors (red, green, and blue) in the color. Values range from 00 (the lowest intensity of a primary color) to FF (the highest intensity of a primary color).

That means every hex code consists of three pairs, or six characters in total. These six characters can be any combination of ten numerals (0-9) and six letters (a-f). This 16-symbol numeral system is known as hexadecimal code. In total, there are 16,777,216 possible combinations. Let’s try to figure out a few of them.

To figure out the hex color code of white, consider that you have to mix each of the three primary colors at their full intensity. That means the Hex color code of white is #FFFFFF. Since black is a lack of primary color, its hex color code is #000000. If you want red, then you want the highest intensity of red and the lowest intensity of the other two primary colors. The hex code of red would therefore be #FF0000. Take a look at the diagram below for a few other combinations.

Source

Take a look at the screenshot below for more examples.

Source

To get more familiar with hex codes, you can play around with online tools like color pickers and wheels.

Using the color picker shown below, you can figure out the hex codes of different colors, from black and white to the deepest greens and brightest blues.

Source

Once you find a color you like, make note of its hex code. That way, you can reuse the same colors in multiple designs and across channels, which is essential for consistent branding.

Now that you understand what HTML color codes are and hex codes in particular, let’s look at how you can use HTML color codes.

How to Use HTML Color Codes

You can add hex codes in your site’s HTML to edit the color of individual elements.

Say, for example, you want to change the color of a paragraph to red. You simply add a style attribute to the paragraph element you want to color and use the color property with the correct Hex code. The code will look like this:

 

   <p style="color:#FF0000";>Red paragraph text</p>

Using this code, I could transform the intro of this blog post, making the first paragraph red. It would look something like this on the front end:

Source

You could also separate the HTML and CSS and achieve the same result. 

Here’s the CSS you’d put in the head section of your doc: 

 

   body {
color:#FF0000;
}

Here’s the HTML you’d put in the body section of your doc:

 

   <p>Red paragraph text</p>

Using this same process, you can change the color of your background, text, and other elements on your site. 

Building a Site in Color

Color can help emphasize an element on the page, create brand recognition, and make your site memorable. Now that you have a basic understanding of HTML color codes, you can add or change color on your site to create a cohesive design.

Now that you have HTML color codes down, learn about other HTML codes that can help you properly render information on your website and make necessary updates.