Table of contents
1.
Introduction
2.
HTML Colors
3.
HTML Color Coding
4.
What is a Color HEX Code?
5.
HTML Color Names
5.1.
Standard HTML Color Names
5.2.
Example
6.
Limitations of Using HTML Color Names
7.
Frequently Asked Questions
7.1.
What are the 16 HTML color names?
7.2.
What is a 6 digit color code?
7.3.
What color is 00FF00 code?
7.4.
How do I remember the color name in HTML?
8.
Conclusion
Last Updated: Mar 27, 2024
Easy

Understanding HTML Color Names

Author Nidhi Kumari
1 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Using colour is one of the most crucial aspects of website design. Your simple website can attract many people with the help of colours. Unless you have a thorough understanding of colour theory, selecting the appropriate shades for a website can be difficult and time-consuming. This article will cover various HTML colour names and colour codes. We will also see how to choose colour schemes that look good and generate positive responses on your web pages.

HTML color names.

HTML Colors

HTML serves as the backbone of your website, and colours are a vital component of any website. Compared to a black-and-white website, a colourful website is more visually appealing.

See the following images and select the one with an attractive visual appearance.

Image A:

html colors


 

Image B:

html colors

Most people will select image B. Therefore, we can say that colours are vital components of any website or application.

HTML allows us to apply html colors using the <body> tag. The following attributes of the <body> tag can be used to determine different colours:

  • Background Color: The bgcolor option determines the background color of the website page’s.
     
  • Font Color: The colour of the body text is determined by the text.
     
  • Linked Text Color: One can also apply colour effects to the linked text.

    • alink: For selected or active links, alink assigns a colour.
       
    • vlink: For linked text that has already been clicked, vlink sets a colour.
       
    • link: Setting a colour for linked text can be done using the link.

HTML Color Coding

There are mainly three different ways to set html colours to your application or webpage.

  • Using html color names: You can specify the colour's name explicitly.

    For example,
     
<body style="background-color: red;">

 

<body style="background-color: blue;">

 

<font color="blue">The example of blue text.</font> 

 

  • Using hex codes: Numbers in hex a six-digit code that indicates the proportion of red, green, and blue in a given colour.

    For example,
     
background-color: #FF0000; // Red Colour

 

background-color: #00FF00; // Green Colour

 

background-color: #0000FF; // Blue Colour
Hexcode
  • Using percentage values: The RGB() property is used to specify the colour percentage.

    For example,
     
background-color: rgb(0,0,255); //blue colour

 

background-color: rgb(255,255,255): //white colour

 

background-color: rgb(192,192,192): //silver colour

 

background-color: rgb(211,211,211): //light grey colour

What is a Color HEX Code?


A Color HEX Code, also known as a hexadecimal color code, is a six-character code that represents a specific color in digital design and web development. It consists of a combination of numbers and letters (0-9 and A-F), denoting the red, green, and blue components of the color. For instance, #FF5733 represents a shade of orange. The first two characters indicate the intensity of red, the next two for green, and the last two for blue. This system allows for a wide range of colors to be precisely defined for use in digital applications.

HTML Color Names

In HTML 5, you can specify 147 different html color names and hexadecimal or hex code values, of which 17 are considered standard colours. Colour

Standard HTML Color Names

The following 17 colours are standard html color names with hexadecimal code.

Colour Name Code Colour Name Code
Aqua #00FFFF Olive #808000
Black #000000 Orange #FFA500
Blue #0000FF Purple #800080
Fuchsia #FF00FF Red  #FF0000
Grey #808080 Silver #C0C0C0
Green #008000 Teal #008080
Lime #00FF00 White #FFFFFF
Maroon #800000 Yellow #FFFF00
Navy #000080 Hot Pink #FF69B4
LemonChiffon #FFFACD FireBrick #B22222
AliceBlue #F0F8FF Coral #FF7F50

140 more html color names are non-standard but supported by web browsers.

Example

Here is an example of applying the background colour of a webpage using the colour name and hex code.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML colour Names</title>
   </head>

   <body text = "#FF0000" bgcolor = "silver">
      <p>Coding Ninjas Html Color names example</p>
      
      <table bgcolor = "#808000">
         <tr>
            <td>
               <font color = "white">Example of white text with olive background.</font>
            </td>
         </tr>
        </table>
        
       <table bgcolor = "purple">
          <tr>
            <td>
               <font color = "white">Example of white text with purple background.</font>
            </td>
        </tr>
      </table>
   </body>
   
</html>

 

Output:

Output

Limitations of Using HTML Color Names

We generally use six hex digits or a triplet of three 8-bit numbers to represent a colour in HTML. As we know, 1 hex digit maps to 4 binary digits (nibble). So, six hex digits will be equivalent to 24 binary bits (6 hex digits *4). That means we can have 224 = 16 million (approximately) colours, but we only have 147 instead of 16 million. It results in a limitation on using colour names in HTML.

The limitations of using a colour name in HTML include the fact that not all browsers display them equally. For example, you might think that "purple" is a pure hue somewhere between red and blue, but when you use the colour name, it simply refers to a dark magenta. You must use the hexadecimal values of the colours or the rgb colour property if you want to define them in a way that is browser-compatible. 

Additionally, if you want to add transparency to your colour, you can’t do it using the name of the colour. For example, sometimes the colour pink and purple are quite confusing. Since the hue value is the same for both. In such cases, the saturation value is used, which is impossible when you use colour names.

Frequently Asked Questions

What are the 16 HTML color names?

The 16 HTML color names include black, white, gray, silver, red, maroon, yellow, olive, lime, green, aqua, teal, blue, navy, purple, and fuchsia.

What is a 6 digit color code?

A 6-digit color code, also known as a HEX code, represents a specific color in web design. It consists of six characters, combining numbers (0-9) and letters (A-F).

What color is 00FF00 code?

The color code 00FF00 corresponds to pure green in hexadecimal notation. This code signifies maximum intensity of green, with no red or blue components.

How do I remember the color name in HTML?

In HTML, you can remember color names by using predefined color names such as red, blue, or green. These names represent specific colors and can be easily recalled when setting the color attribute for HTML elements.

Conclusion

In this article, we covered the HTML color names and their colour code. We covered seventeen standard html color names and how to implement them using hexadecimal codes.

We hope this blog has helped you. We recommend you visit our articles on different topics of HTML, such as

 

If you liked our article, do upvote our article and help other ninjas grow. You can refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and AlgorithmsCompetitive ProgrammingSystem Design, and many more!

Head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences and interview bundles, follow guided paths for placement preparations, and much more!!

Happy Reading!!

Live masterclass