HTML Color Codes for All Your Web Design Needs

Color is one of the most important aspects of web design, making HTML color codes an essential part of any development project. When newcomers first learn HTML on their own or in a web developer bootcamp, they often discover that picking the right colors for a website is vital to making it unique, comfortable to browse and appealing to the eye. It’s important to get a firm grasp on how these codes work, since colors matter in every element from menus and backgrounds to text, images, videos, animations and advertisements.

By the end of this article covering the basics of HTML color codes and how to utilize them,  you’ll find that they are relatively intuitive. By the end, you should be ready to apply this knowledge to your own projects.

Laying the Groundwork

There are a few components that are important to understand from the start:

• You have a wide number of options.
• All colors have their own unique HTML color codes.
• Using simple color psychology, you can figure out which colors to use.
• HTML color codes should be as accessible as possible to your viewers.

You will have a massive number of color options to choose from. Assuming you are working with CSS3, you can also use CSS to work with HTML color codes since color attributes in HTML are not usually supported anymore. While you’re experimenting, keep in mind that if you are using an older browser, some features may not work correctly. 

The Basics of HTML Color Codes

Pick a specific HTML color code by placing the pound symbol (#) in front of six hexadecimal digits, or numbers that use 16 as their base rather than 10. HTML color codes use the letters from A to F to represent the numbers 10 to 15. These digits are case-independent, so you can enter them however you like.

For two-digit HTML color codes, the value of the number is determined by multiplying the first digit by 16, then adding the second digit. For example, for the hexadecimal number 3F, you know that it means the value will equal 16 times 3 plus 15, or 63. The first two digits represent the red value, the second two digits represent green and the final two digits represent blue. The acronym RGB makes it easy to remember this order. 

The smaller the value, the darker the color, which is why the code for black is #000000 and the code for white is #FFFFFF. There is also a shorter version of HTML color codes that uses three digits in the same order, where each digit is given twice to make a six-digit version. So, if you see the HTML color code #46A, you know it is identical to #4466AA without having to type it out each time.

There is also an eight-digit version of HTML color codes, which is used to add a transparency value. Colors are fully opaque in three- and six-digit values, while eight-digit values add two digits to the end to indicate transparency. So, 00 represents a completely transparent color, while FF represents fully opaque colors. For example, if you input #0000FF88, you will see a semi-transparent blue. 

You can also add transparency to three-digit HTML color codes using a single digit. Four-digit color #46A8 is a semi-transparent color that is the same as #4466AA88. Use functional notation for color values if you like, using decimals from 0 to 255, indicating a color as: rgb(250,75,155), for example.

Using HTML Color Codes With CSS

The color property is only used for an object’s foreground color and usually covers border areas, padding and content. Multiple CSS properties are used to designate HTML color codes for different parts of webpages; for instance, border-color handles the border colors in a table. Use HTML color codes to specify background and text colors. For example:

Some HTML color codes are used in combination with other values, like the border which uses three values: color, width and style. You can add a black border to an object by using:

CSS colors use a slightly different model known as sRGB, which is known as an additive color model where the various color components (red, green and blue) come together to produce the final color. 

Keep in mind that screens and printers are not calibrated exactly the same, so colors may not always show up perfectly. However, your colors will at least be quite close to what you expect across most devices. 

Using Named Colors

When you learn HTML with CSS, either through an HTML tutorial or on your own, you will likely learn the benefit of being able to access your favorite HTML color codes using their names rather than numeric values. This comes in handy if someone else is working on the same project or using your scheme to create a new one, since using named colors makes your work far more intelligible. HTML color codes can also have more than one name so you can use your preferred name.

Creating Inclusive Color Schemes

Accessibility complicates the process of giving every user the intended experience. The more people that can comfortably use your website, the better your site will perform. For instance, color blindness affects millions of people with varying types and degrees of severity. Some people are unable to see one color, while others cannot see an entire spectrum. And while some can only see in black and white, others see little or nothing at all. This makes it difficult to create a one-size-fits-all approach to using HTML color codes in your designs.

Your HTML color codes need to consider how people see color and appear vibrant and appealing without being overwhelming or confusing — in other words, they need to be user-friendly. They should also be consistent across devices and easy to view without appearing dull.

If you keep as many users in mind as possible, you can consider how each may interact with your site. This consideration for inclusivity helps you use HTML color codes as effectively as possible. Keeping your website engaging, readable and enjoyable to use means that no user misses out on the experiences you create.

Putting HTML Color Codes Into Action

As you continue to learn through HTML tutorials or a web developer bootcamp, you will start to understand that knowing your way around color codes is key to designing any website, since precise control over your color scheme is vital to how users perceive and interact with your page. 

*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.