HTML Colors

Whether you are redesigning your Website or using the color palette for the first time. This article will help you with the essential knowledge to update and add colors to your website.

Color creates emotion, establishes the tone, and makes your site's overall design more aesthetic. Thus, to improve the overall design of your website and create a pleasant user interface, colors are very crucial.

In this article, we’ll cover everything that you must know about design principles related to HTML color codes.

How to add colors to your HTML webpage?

In HTML we use the style attribute to add colors to various elements. Moreover, we use Cascading Style Sheets (CSS) to incorporate colors in the HTML components.

Colors improve the aesthetics of a web page. We can use CSS to add color to the background, tables, paragraphs, and other elements of the web page.

For example, to change the color of a paragraph we can use the following markup

Red paragraph text

In above HTML snippet, we used to style attribute to change the color of our paragraph to Red.

HTML Color Codes

We all observe many colors in our daily life, many of these colors have names, such as red and yellow. However, there are hundreds of different hues within these colors, each with its own name. There's bright pink, bubblegum pink, rose, fuchsia, magenta, and a slew of additional colors to choose from.

The trouble is that, no matter how detailed we try to be, different people will interpret these color names differently. Someone's neon pink could be someone else's fuchsia, which could be someone else's magenta.

To avoid confusion and maintain a standard naming convention we use HTML color codes. HTML color codes are deciphered by computers, allowing them to display the correct color. These codes can be found in a number of different formats, such as Hex color codes, RGB, etc.

HTML Hex Color Codes

Hex color code is the most popular HTML format for websites and other software applications. A hex color code constitutes six numbers or characters and a hashtag as its prefix. For example, #FF0000 is the Hex color code for the color red.

The first two numbers or characters represent the intensity of the color red, followed by the next 2 characters for green, and the last two characters for the color blue. Each character takes up a value from 0-9 and A-F, where 0 is the minimum and F is the maximum.

Thus we can rewrite the above HTML snippet using Hex color, Red paragraph text

HTML RGB Color Codes

Another format for the HTML color is RGB color code. The RGB color code uses three number values, one each for red, green, and blue.

Here, we use rgb(red, green, blue) property to indicate colors. Each of the three parameters (red, green, and blue) specifies the color's intensity as a number between 0 and 255.

For example, We can change the background of the paragraph element using the rgb() property.

Green background

You can also use separate HTML and CSS files to add colors to your website.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Heading with green background</h1>
    <p>Red paragraph text</p>
  </body>
</html>

CSS file

h1 { 
  background-color: rgb(0, 255, 0);
}

p {
  color: #FF0000;
}

Conclusion

Color can be used to draw attention to a particular aspect on a page, establish brand awareness, and make your website unique. You can add or alter the color on your site to create a coherent design. Now that you have a basic understanding of HTML color codes, it is best to explore it more on your own by adding different styles to your webpage.

Ankit Joshi