Colors in HTML (with Examples)

Colors are an essential part of any HTML document. They play a significant role in enhancing the good look, readability, and overall user experience of web pages. All the modern web browsers support more than 200 standard colors.

Originally, HTML had defined a limited set of color names that could be used directly within HTML elements of a web page. Now, we define them in the CSS because CSS offers more flexibility and control over colors.

However, many color names used in the CSS are borrowed from the original HTML color names. We can define colors in HTML webpage either using color names or with RGB, HEX, HSL, RGBA, or HSLA values. Let’s understand all of them one by one.

Common Ways to Define Colors in HTML

In HTML, we can specify colors using various methods. Here are some common ways to define colors:

1. Color Names:

HTML provides a set of predefined color names, such as “red”, “blue”, “green”, etc. We can directly specify the color of HTML elements using the name of colors.

Example 1:

<!DOCTYPE html>
<html>
<body>
  <p style="background-color:Tomato;">Tomato</p>
  <p style="background-color:Orange;">Orange</p>
  <p style="background-color:DodgerBlue;">DodgerBlue</p>
  <p style="background-color:MediumSeaGreen;">MediumSeaGreen</p>
  <p style="background-color:Gray;">Gray</p>
  <p style="background-color:SlateBlue;">SlateBlue</p>
  <p style="background-color:Violet;">Violet</p>
  <p style="background-color:LightGray;">LightGray</p>
</body>
</html>

Output:

Some common examples of HTML color names.

Example 2:

<!DOCTYPE html>
<html>
<body>
   <p style="color: red;">This text is red.</p>
   <p style="color: blue;">This text is blue.</p>
   <p style="color: green;">This text is green.</p>
   <p style="color: yellow;">This text is yellow.</p>
   <p style="color: black;">This text is black.</p>
   <p style="color: white;">This text is white.</p>
   <p style="color: gray;">This text is gray.</p>
   <p style="color: orange;">This text is orange.</p>
   <p style="color: purple;">This text is purple.</p>
   <p style="color: pink;">This text is pink.</p>
</body>
</html>

In this example, we have set various colors of text using the color property of CSS. These are just a few examples of color names available in HTML. There are many more color names you can use to style your HTML elements.

2. Hexadecimal Notation:

We can define colors in HTML document using a hexadecimal (hex) notation. This notation are six-digit codes representing the combination of red, green, and blue color values (RGB). We can specify a color in HTML using hexadecimal value in the form:

#rrggbb

Here, rr, gg, and bb are the hexadecimal color codes for the red, green, and blue, ranging from 0 to 255, i.e. 00 to FF. The lowest value for each light source is 0 (hex) while, the highest value is 255 (hex FF).

Hexadecimal color values start with a pound or hash sign #, followed by either three or six hex characters. For example, the representation of white and black colors in hexadecimal is #ffffff and #000000, respectively.

In HTML and CSS, when you specify a color using the three-digit notation (#rgb), it automatically gets converted to the six-digit notation (#rrggbb). The three-digit notation consists of three hexadecimal digits, each representing the intensity of red, green, and blue, respectively. For example, “#f00” represents pure red.


Here, we have listed the most important color names with RGB values in the below table.

Color NameRGB Value
White#FFFFFF
Red#FF0000
Green#008000
Blue#0000FF
Yellow#FFFF00
Fuchsia#FF00FF
Aqua#ooFFFF
Navy#000080
Grey#808000
Purple#800080
Black#000000
Lime#00FF00
Maroon#800000
Olive#808000
Silver#C0C0C0
Teal#008080

From the above table, it is clear that the hex color code is written as: # = rrggbb. That is:

  • # represents the color number.
  • The color number consists of values for the rr (red), gg (green), and bb (blue), each represented by two hexadecimal digits.
  • The numbers must display in hexadecimal (base 16) values which include: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Here, a represents 10, b represents 11, c represents 12, d represents 13, e represents 14, and f represents 15 in decimal.

Let take an example in which we will change the text color and background color for HTML elements using hexadecimal notation.

Example 3:

<!DOCTYPE html>
<html>
<head>
<style>
   /* CSS code to set background color */
   body {
      background-color: #336699; /* Hexadecimal notation for a blue color*/
   }
</style>
</head>
<body>
   <p style="color: #ffffff">This is an example of setting the background color using hexadecimal notation in HTML.</p>
</body>
</html>

3. RGB Function:

In HTML, we can define colors using RGB function. Here, RGB stands for red, green, and blue. This function takes three parameters: red, green, and blue components, each ranging from 0 to 255. We can specify RGB color values as follows:

rgb(red, green, blue)

Each parameter in the rgb(red, green, blue) function defines the intensity of the color with a value between 0 and 255. It means that there are 256 * 256 * 256 = 16777216 colors possible in HTML. For example, rgb(255, 0, 0) represents a pure red color. This is called numeric notation.

To define the same color with the percentage notation, the value would be rgb(100%, 0, 0). If the value is 0%, it represents a pure white black. If the value is 100%, it represents a pure white color. So, if we set the color rgb(50%, 100%, 30%), the color will be a bright green.

Here’s a list of commonly used top 26 colors in web design and can be represented using the RGB function in HTML:

  • Red: rgb(255, 0, 0)
  • Green: rgb(0, 255, 0)
  • Blue: rgb(0, 0, 255)
  • Black: rgb(0, 0, 0)
  • White: rgb(255, 255, 255)
  • Yellow: rgb(255, 255, 0)
  • Cyan: rgb(0, 255, 255)
  • Magenta: rgb(255, 0, 255)
  • Gray: rgb(128, 128, 128)
  • Dark Red: rgb(139, 0, 0)
  • Dark Green: rgb(0, 100, 0)
  • Dark Blue: rgb(0, 0, 139)
  • Light Gray: rgb(211, 211, 211)
  • Brown: rgb(165, 42, 42)
  • Orange: rgb(255, 165, 0)
  • Purple: rgb(128, 0, 128)
  • Pink: rgb(255, 192, 203)
  • Sky Blue: rgb(135, 206, 235)
  • Lime: rgb(0, 255, 0)
  • Teal: rgb(0, 128, 128)
  • Aqua: rgb(0, 255, 255)
  • Fuchsia: rgb(255, 0, 255)
  • Maroon: rgb(128, 0, 0)
  • Navy: rgb(0, 0, 128)
  • Olive: rgb(128, 128, 0)
  • Silver: rgb(192, 192, 192)

Example 4:

<!DOCTYPE html>
<html>
<body>
   <div style="background-color: rgb(255, 0, 0);">Red</div>
   <div style="background-color: rgb(0, 255, 0);">Green</div>
   <div style="background-color: rgb(0, 0, 255);">Blue</div>
   <div style="background-color: rgb(0, 0, 0);">Black</div>
   <div style="background-color: rgb(255, 255, 255);">White</div>
   <div style="background-color: rgb(255, 255, 0);">Yellow</div>
   <div style="background-color: rgb(0, 255, 255);">Cyan</div>
   <div style="background-color: rgb(255, 0, 255);">Magenta</div>
   <div style="background-color: rgb(128, 128, 128);">Gray</div>
   <div style="background-color: rgb(139, 0, 0);">Dark Red</div>
   <div style="background-color: rgb(0, 100, 0);">Dark Green</div>
   <div style="background-color: rgb(0, 0, 139);">Dark Blue</div>
   <div style="background-color: rgb(211, 211, 211);">Light Gray</div>
</body>
</html>

Output:

HTML colors using rgb function

4. RGBA Function:

This is an extension of RGB color model which includes an additional alpha component along with the red, green, and blue components. The alpha component specifies the opacity of the color. The range of alpha value is from 0.0 to 1.0, where 0.0 is for completely transparent and 1.0 for completely opaque. We can specify an RGBA color value as follows:

rgba(red, green, blue, alpha)

Example 5:

<!DOCTYPE html>
<html>
<body>
    <div style="background-color: rgba(255, 0, 0, 0.5);">Semi-transparent red</div>
</body>
</html>

5. HSL Function:

HSL stands for Hue, Saturation, and Lightness. In the HTML document, we can define colors using hsl() function, which takes three parameters: hue, saturation, and lightness. The basic form to specify an HTML color using hue, saturation, and lightness (hsl) is as follows:

hsl(hue, saturation, lightness)

Here, hue is represented in degrees from 0 to 360, while saturation and lightness are represented as percentages (0% to 100%). The value 0% represents a black color, while the value 50% is neither light nor dark. 100% value is white color.

Example 6:

<!DOCTYPE html>
<html>
<body>
    <div style="background-color: hsl(0, 100%, 50%); padding:10px">hsl(0, 100%, 50%)</div>
    <div style="background-color: hsl(240, 100%, 50%); padding:10px">hsl(240, 100%, 50%)</div>
    <div style="background-color: hsl(147, 50%, 47%); padding:10px">hsl(147, 50%, 47%)</div>
    <div style="background-color: hsl(300, 76%, 72%); padding:10px">hsl(300, 76%, 72%)</div>
    <div style="background-color: hsl(39, 100%, 50%); padding:10px">hsl(39, 100%, 50%)</div>
    <div style="background-color: hsl(248, 53%, 58%); padding:10px">hsl(248, 53%, 58%)</div>
</body>
</html>

Output:

An example of hsl color values in HTML.

Saturation defines the intensity of a color. For example, 100% means pure color, no shades of gray. 50% means you can see the color with 50% gray. 0% means completely gray. You can no longer to see the color.

Example 7:

<!DOCTYPE html>
<html>
<body>
   <div style="background-color: hsl(0, 100%, 50%); padding:10px">hsl(0, 100%, 50%)</div>
   <div style="background-color: hsl(0, 80%, 50%); padding:10px">hsl(0, 80%, 50%)</div>
   <div style="background-color: hsl(0, 60%, 50%); padding:10px">hsl(0, 60%, 50%)</div>
   <div style="background-color: hsl(0, 40%, 50%); padding:10px">hsl(0, 40%, 50%)</div>
   <div style="background-color: hsl(0, 20%, 50%); padding:10px">hsl(0, 20%, 50%)</div>
   <div style="background-color: hsl(0, 0%, 50%); padding:10px">hsl(0, 0%, 50%)</div>
</body>
</html>

Output:

Saturation color example

The lightness of a color defines how much light you want to provide the color. For example, 0% means no light (i.e. black), 50% means light (neither dark nor light), and 100% means full brightness (i.e. white).

Example 8:

<!DOCTYPE html>
<html>
<body>
   <div style="background-color: hsl(0, 100%, 0%); padding:10px">hsl(0, 100%, 0%)</div>
   <div style="background-color: hsl(0, 100%, 25%); padding:10px">hsl(0, 100%, 25%)</div>
   <div style="background-color: hsl(0, 100%, 50%); padding:10px">hsl(0, 100%, 50%)</div>
   <div style="background-color: hsl(0, 100%, 75%); padding:10px">hsl(0, 100%, 75%)</div>
   <div style="background-color: hsl(0, 100%, 90%); padding:10px">hsl(0, 100%, 90%)</div>
   <div style="background-color: hsl(0, 100%, 100%); padding:10px">hsl(0, 100%, 100%)</div>
</body>
</html>

Output:

Example of lightness of a color in HTML

6. HSLA Function:

This is an extension of the HSL color model, which includes an additional parameter named alpha for opacity of color. The value of an HSLA color is specified with:

hsla(hue, saturation, lightness, alpha)

Here, the alpha parameter is a number from 0.0 to 1.0. 0.0 represents fully transparent and 1.0 represents not transparent at all.

Example 9:

<!DOCTYPE html>
<html>
<body>
   <div style="background-color: hsla(0, 100%, 50%, 0);">hsla(0, 100%, 50%, 0)</div>
   <div style="background-color: hsla(0, 100%, 50%, 0.2);">hsla(0, 100%, 50%, 0.2)</div>
   <div style="background-color: hsla(0, 100%, 50%, 0.4);">hsla(0, 100%, 50%, 0.4)</div>
   <div style="background-color: hsla(0, 100%, 50%, 0.6);">hsla(0, 100%, 50%, 0.6)</div>
   <div style="background-color: hsla(0, 100%, 50%, 0.8);">hsla(0, 100%, 50%, 0.8)</div>
   <div style="background-color: hsla(0, 100%, 50%, 1);">hsla(0, 100%, 50%, 1)</div>
</body>
</html>

Output:

An example of hsla color values.

In this tutorial, we have learn how to specify colors in HTML document using various methods like color names, hexadecimal colors, RGB, RGBA, HSL, and HSLA. We can apply the colors to various HTML elements in the webpage, such as to change color of text, background color, etc. We hope that you will have understood the basic ways of applying colors to HTML elements.

DEEPAK GUPTA

DEEPAK GUPTA

Deepak Gupta is the Founder of Scientech Easy, a Full Stack Developer, and a passionate coding educator with 8+ years of professional experience in Java, Python, web development, and core computer science subjects. With strong expertise in full-stack development, he provides hands-on training in programming languages and in-demand technologies at the Scientech Easy Institute, Dhanbad.

He regularly publishes in-depth tutorials, practical coding examples, and high-quality learning resources for both beginners and working professionals. Every article is carefully researched, technically reviewed, and regularly updated to ensure accuracy, clarity, and real-world relevance, helping learners build job-ready skills with confidence.

Related Posts