HTML Colors

---

Colors make our web page attractive & engages the user. HTML supports more then 200 different colors. In this article we will discuss the various methods by which we can implement colors on our web page.

Color Coding Methods

We mainly use three methods to set colors on our web page. These are:

Color Names

In HTML, we can directly specify a color by using a color name:

Example

<p style = "color:Violet;"> This is a Voilet text </p> 
<h2 style = "color:Orange; background-color:green;"> This is a Orange text </p> 

Output

This is a Voilet text

This is a Orange text

We can also set the background color for HTML elements:

Example

<p style="background-color:Green ;"> This text has grren background </p> 
</br>
<p style= "color:Red; background-color: Gray;"> This is a red text with gray background </p> 

Output

This text has grren background

This is a red text with gray background

RGB Values

In HTML, we can also specify colors by using RGB values. RGB value represents RED, GREEN BLUE (RGB).

The value of RGB ranges between 0 – 255, which defines the intensity of the color. For example rgb(0,0,255) is displayed as blue, because the blue is set to its highest value, and other two (red and green) are set to 0. Similarly rgb(255,0,0) is displayed as red and rgb(0,255,0) is displayed as green.

Now if we wanna to display white color, we set all color parameters at their highest i.e 255, e.g rgb(255,255,255). If we set all color parameters to 0, like this rgb(0,0,0) it will display black color.

In a below example, let’s see how you can add RGB color values in your code.

Example

<p> <strong> let's specify colors by using RGB values </strong> </p> 
</br>
<p style="background-color:rgb(0,0,255); color:rgb(255,255,255);" > This text has blue background because we have set rgb(0,0,255) that means red and green are set to 0, and blue is set to it's highest value. So that is why background color here is blue. The text color is white, that is because we have set rgb(255,255,255) all three colors at their highest value </p> 

Output

let’s specify colors by using RGB values

This text has blue background because we have set rgb(0,0,255) that means red and green are set to 0, and blue is set to it’s highest value. So that is why background color here is blue. The text color is white, that is because we have set rgb(255,255,255) all three colors at their highest value

Hex Codes

A hexadecimal color code starts with the symbol “#” followed by six alphabets or numbers. It specifies the #RRGGBB, where the RR is red, GG is green & BB is blue. A hexadecimal values between 00 and (ff) (same as decimal 0-255) where the (ff) is the highest value and (00) is the lowest.

For example #0000ff is displayed as blue, because blue is set to its highest value, and other two (red and green) are set to their lowest value (00). Similarly #00ff00 is displayed as green, because green is set to it’s highest value, and other two (red and blue) are set to 00.

If you wanna to display white, set all color parameters to their highest (ff), like this #ffffff. To display white, set all color parameters to their lowest (00), like this #000000.

Now in a below example let’s see how you can add hex color codes in your code.

Example

<p> <strong> let's specify colors by using HEX color codes </strong> </p> 
</br>
<p style="background-color:#0000ff; color:#ffffff;" > This text has blue background because we have set #0000ff that means red and green are set to 0, and blue is set to it's highest value. So that is why background color here is blue. The text color is white, that is because we have set #ffffff all three colors at their highest value </p> 

Output

let’s specify colors by using HEX color codes

This text has blue background because we have set #0000ff that means red and green are set to 0, and blue is set to it’s highest value. So that is why background color here is blue. The text color is white, that is because we have set #ffffff all three colors at their highest value