HTML Colors

Please Share On:

In this tutorial, you will learn mostly used HTML colors in your web pages.

The HTML colors are used to make your web page more attractive. The HTML colors are specified by predefined color names like red, green, blue, etc., or different color values like HEX, RGB, RGBA, HSL, and HSLA.

  1. Color Names
  2. Background Colors
  3. Text Colors
  4. Border Colors
  5. Color Values

1. Color Names:

In HTML a color can be specified by using a predefined standard color name. Here is an example of predefined color names:

Red

Green

Blue

White

Purple

Orange

lime

Syntax:

<h3 style="background-color:Red;">Red</h3>

Code:

<!DOCTYPE html>
<html>
  <head>
  </head>
   
  <body>
    <h3 style="background-color:Red;"><center>Red</center></h3>
    <h3 style="background-color:Green;"><center>Green</center></h3>
    <h3 style="background-color:Blue;"><center>Blue</center></h3>
    <h3 style="background-color:White;"><center>White</center></h3>
    <h3 style="background-color:Purple;"><center>Purple</center></h3>
    <h3 style="background-color:Orange;"><center>Orange</center></h3>
    <h3 style="background-color:lime;"><center>lime</center></h3>
  </body>
</html>

Output:

Try it yourself


2. Background Colors:

Colors can be used to set the HTML background elements.

Syntax:

<h3 style="background-color:Red;">Red</h3>

Code:

<!DOCTYPE html>
<html>
  <head>
  </head>
   
  <body>
    <h3 style="background-color:Red;"><center>My background color is red.</center></h3>
    <p style="background-color:Green;">My background color is green.</p>
  </body>
</html>

Output:

My background color is red.

My background color is green.

Try it yourself


3. Text Colors

Colors can be used to set the HTML text elements.

Syntax:

<p style="color: blue">I am a text in blue color.</p>

Code:

<!DOCTYPE html>
<html>
  <head>
  </head>
   
  <body>
    <p style="color: blue">I am a text in blue color.</p>
    <p style="color: red">I am a text in red color.</p>
    <p style="color: orange">I am a text in orange color.</p>
    <p style="color: pink">I am a text in pink color.</p>
  </body>
</html>

Output:

Try it yourself


4. Border Colors

You can set the border colors.

Syntax:

<p style="border: 3px solid blue">I am a text with blue border.</p>

Code:

<!DOCTYPE html>
<html>
  <head>
  </head>
   
  <body>
    <p style="border: 3px solid blue">I am a text with blue border.</p>
    <p style="border: 6px dotted red">I am a text in red color.</p>
    <p style="border: 8px dashed orange">I am a text in orange color.</p>
    <p style="border: 12px groove pink">I am a text in pink color.</p>
  </body>
</html>

Output:

I am a text with blue border.

I am a text in red color.

I am a text in orange color.

I am a text in pink color.

To learn more about border style, CLICK HERE.

Try it yourself


5. Color Values

In HTML, colors can also be specified by HEX values, RGB values, RGBA values, HSL values, and HSLA values.

Syntax:

<h1 style="background-color:#6600ff;">HEX color : #6600ff.</h1>
<h1 style="background-color:rgb(102, 0, 255);">rgb(102, 0, 255)</h1>
<h1 style="background-color:hsl(264, 100%, 50%);">hsl(264, 100%, 50%)</h1>

<h1 style="background-color:rgba(102, 0, 255, 0.7);">rgb(102, 0, 255)</h1>
<h1 style="background-color:hsla(264, 100%, 50%, 0.5);">hsl(264, 100%, 50%)</h1>

Code:

<!DOCTYPE html>
<html>
  <head>
  </head>
   
  <body>
    <h1 style="background-color:#6600ff;">HEX color : #6600ff.</h1>
    <h1 style="background-color:rgb(102, 0, 255);">rgb(102, 0, 255)</h1>
	<h1 style="background-color:hsl(264, 100%, 50%);">hsl(264, 100%, 50%)</h1>

	<h1 style="background-color:rgba(102, 0, 255, 0.7);">rgb(102, 0, 255)</h1>
	<h1 style="background-color:hsla(264, 100%, 50%, 0.5);">hsl(264, 100%, 50%)</h1>
  </body>
</html>

Output:

HEX color : #6600ff.


rgb(102, 0, 255)


hsl(264, 100%, 50%)


rgb(102, 0, 255)


hsl(264, 100%, 50%)

To learn more detail about color values, Click HERE.

Try it yourself

You may be interested in the following topics:

Post Views: 493

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial