HTML Colors

HTML, aka hypertext markup language, is a standard platform that helps you create the structure of a webpage. It incorporates numerous elements, such as headings, paragraphs, links, colors, images, and so on.

In my journey as a techie, HTML colors were a very important aspect whenever I tried to create a layout for a webpage. This element helped me create and design an attractive webpage by incorporating a subtle blend of colors, and HTML tutorials were a great support in my early days.

In the tutorial, I’ll help you understand where you can apply HTML colors and how they enhance the quality of a webpage. 

What are HTML Colors?

HTML colors are an attribute provided by the platform to help create and design interactive and attractive layouts for web pages easily. Previously, the HTML color tag used to recognize only 16 colors, namely, black, gray, white, maroon, silver, red, olive, Osia, lime, green, purple, yellow, teal, blue, aqua, and navy. However, with recent developments in the tech industry and the inclusion of new browsers, 147 CSS3 colors can be recognized in HTML expressed in #FF0000 and #FFFFFF format.

I apply HTML colors to backgrounds, tables, texts, borders, forms, links, etc, to design a webpage’s basic structure. You can define them in variations, including specified color names, hexadecimal numbers, RGB, HSL, and RGBA, allowing precise and complete influence on how colors should be displayed on webpages.

Different Use Cases of HTML Colors

HTML colors allow you to experiment with a diverse color palette. I have curated this detailed guide about the various use cases of HTML colors.

Background Color

One of the main attributes of an HTML color program is the appearance of the background. 

The color that appears on a webpage underneath what is displayed is called the HTML background color. Excluding the margin, it is the background that fills the entire webpage that you have created. 

To add background color in HTML, use the following syntax: 

<div style=”background-color: blue;”>

Div with blue background

</div>

Text Color

You can add whichever color you want to the text to be displayed on the webpage. You should choose a text color that is appropriate for increasing the readability of the text and which is appealing to the users.

The syntax for adding the text color is:

<p style=”color: white;”>

White color is used

</p>

Border Color

Another important color attribute in the HTML color list is the color of the border of a webpage. The border color in HTML colors will bring out the desired color to the border lines.

Here is a syntax that you have to use for defining the border color:

<div style=”border: 1px solid black; border-color: black;”>

This div has a black border

</div>

Link Color

Last but not least, you can incorporate the HTML color code list to highlight a particular link to attract the reader's attention. The link color shall be different from that of the other text on the webpage so visitors can easily differentiate it.

The link color will only demonstrate the color of the anchor tag that the webpage contains. This will help the user to navigate more easily by highlighting the clickable link in a different color.

Use this syntax to add the HTML link color: 

<a href=”#” style=”color: blue;”>

Link has a blue color

</a>

HTML Colors Example

You don’t need to master coding to use HTML colors to create a layout for your webpage. All you need is a knowledge of basic programming applicable to HTML.

You can also check interesting HTML project ideas to get you started on your webpage designing journey.

Let me illustrate the various HTML color elements in one single example: 

Code:

Result: 

After you execute the above-mentioned code to apply HTML colors on your webpage, you will notice the result or output in the following manner:

• In the above-mentioned illustration, I have created an HTML webpage that includes attributes such as heading, divs, links, and paragraphs.
• The H2 or heading on the webpage will have a green background color to it.
• The divs in this particular web page are highlighted in a box-like structure with a red-colored border.
• I have highlighted the clickable link on this webpage with a blue color for highlighting it.
• Last but not least, the text in the paragraph will appear in black, which is ideal for better visibility and readability.
  

HTML Color Names List

While a variety of colors are available in HTML, certain colors are common and have multiple shades to them. 

Here’s presenting the HTML color list containing some of the most common and widely used colors:

• Red
• Green
• Blue
• Purple
• Gray
• Orange
• Pink
• Yellow

HTML Color Codes and Names

HTML color codes list defines the attributes of colors in a particular webpage. When I started my career, I found it challenging to name colors using particular codes, but with time, it became easier. So, if you’re starting your journey as a techie, don't worry. Learning HTML colors step-by-step will make it a cakewalk for you like it did for me.

You can specify the color codes in HTML using hex, RGB, HSL code names, and keywords. 

Let’s understand each of them one by one.

HTML Color RGB Codes

The RGB color code, as the name suggests, only works with three primary colors: red, green, and blue. This color value will allow you to define colors based on these three primary colors by adjusting the values from 0 to 225. You can mix and adjust these values to generate a variety of colors and create a diverse color palette.

If you want to apply black color, then all the color attributes have to be set at 0, and in the case of white, you need to set every color parameter at the maximum of 255. Subsequently, you can range the values as per your convenience and liking to generate unique shades of different colors.

Here is the syntax for the RGB color code: 

// Green background

<p style="background-color: rgb(0, 255, 0);">

   The background is set to Green by using RGB

</p>

HTML Color Hex Codes

The hex code system, which consists of color codes defined in hexadecimal values, uses a six-digit code system. It includes characters made in pairs to specify and define the attributes of colors. You need to understand the CSS; hex values are defined in the form #rrggbb. Here, rr, gg, and bb represent the intensity of the colors red, green, and blue, respectively.

Using the HTML color hex codes, you can create a wide range of color combinations to design a unique webpage. In this color value system, the range is defined from 00 to ff, where ff denotes the maximum intensity, and 00 denotes the minimum intensity of a color. 

For instance, if you apply a hex code #00ff00, it denotes no red, max, green, and no blue. 

Let me provide the syntax for the hex color code value:

// Blue Background

<div style="background-color: #0000ff;">

   div has a blue background by using Hex

</div>

HTML Color HSL Codes

HSL refers to hue, saturation, lightness, and color value in HTML. You will notice that this system does not mainly focus on the primary color but changes the shade by adjusting the hue, saturation, and lightness of the color. 

Let me explain this by dividing it into three major heads:

• Hue defines the primary color or the type such as red, green, and blue.
• Saturation represents the intensity of the color.
• Light stands for how bright or dark the color will appear on the webpage.

Let’s see the range for each of these attributes while defining a color:

• You can set any range for hue as per your choice from 0 to 360°. 
• In the case of saturation, the lowest range is 0%, and the highest is 100%.
• For lightness, if you wish to keep it as dark as black, then the lowest range is 0%, and if you want to make it as light as white, then the maximum range is 100%, where 50% is the normal range.

Here’s presenting the syntax for the HSL color code system in HTML:

// Gray Background

<div style="background-color: hsl(0, 0%, 50%);">

   This div has a gray background using HSL

</div>

Summing Up

I like how HTML makes it really simple for us to design engaging and dynamic websites. It has been comparatively simpler to grab consumers' attention while they navigate our developed webpage thanks to the wide range of HTML colors. The unique color attributes provided by HTML have increasingly helped developers and tech experts improve their web designing skills including myself.

However, if you wish to learn more about HTML and its usage in the ever-evolving technological world, you can browse through the diverse range of courses offered by upGrad. There are numerous courses that will provide a comprehensive breakdown of all the features connected to HTML to help you succeed in the digital age.

Frequently Asked Questions 

1. What are the 3 color coding systems in HTML?

The three popular HTML color coding systems are RGB, HSL, and hex. These systems help users define and create a diversity of colors that will suit their web page.

2. What is the color range in HTML?

The range for the HTML RGB color coding standard is 0 to 255. The color values of the hex color coding system run from 00 to ff. Lastly, the HSL range spans from 0% to 100% and from 0° to 360°.

3. Is RGB a color code?

Using the RGB color coding scheme, colors are defined by giving them values between 0 and 255. Red, green, and blue are the three fundamental colors from which all other colors are derived.

4. How do I specify a color in HTML?

You can use the BG color attribute in the body section to specify the HTML color tag. Simply define the BG color under the relevant tag, and you can easily specify a color.

5. What are hexadecimal color codes?

Hexadecimal color codes, popularly known as hex codes, are a method for defining color values in HTML. These hex codes work in pairs to define the characters or attributes of a specific color using the specific specification system #rrggbb.

6. How can I apply colors to HTML elements?

To apply colors to HTML elements, you can define the color values using either RGB, HSL, or hex codes. Under the body of the coding, just specify the color codes according to the color you want to choose.

7. What is the default text color in HTML?

In HTML, there is no default color that is predefined by the application. However, your browser or operating system may have a default color that may appear while you work on HTML.

8. How to color text in HTML?

To apply a desired color to the text in HTML, you just need to use the font color tag under the body of the coding section.