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
2 thoughts on “HTML Colors – crus4”