CSS Colors

Applying Colors
Property to be used to apply color for the text: color
Property to be used to apply color for the background: background-color

 

Colors can be specified by using predefined color name

RGB Values

HexaDecimal Code

HSL Values

 

Some of the predefined color names:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

etc

These names can be set as values of background-color property inside style element as inline CSS.

<!DOCTYPE html>
<html>
<body>

<h1 style=”background-color:DodgerBlue;”>Best Computer Institute</h1>

<p style=”background-color:Tomato;”>
To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
</p>

</body>
</html>

The same color names can be applied as text color using color property.

<!DOCTYPE html>
<html>
<body>

<h3 style=”color:Tomato;”>Hello World</h3>

<p style=”color:DodgerBlue;”> To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
</p>

<p style=”color:MediumSeaGreen;”> To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
</p>

</body>
</html>

You can also set the same color names as border names for paragraphs.

<!DOCTYPE html>
<html>
<body>

<h1 style=”border: 2px solid Tomato;”>Best Computer Institute</h1>

<h1 style=”border: 2px solid DodgerBlue;”> Best Computer Institute </h1>

<h1 style=”border: 2px solid Violet;”> Best Computer Institute </h1>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Same as color name “Tomato”:</p>

<h1 style=”background-color:rgb(255, 99, 71);”>rgb(255, 99, 71)</h1>
<h1 style=”background-color:#ff6347;”>#ff6347</h1>
<h1 style=”background-color:hsl(9, 100%, 64%);”>hsl(9, 100%, 64%)</h1>

<p>Same as color name “Tomato”, but 50% transparent:</p>
<h1 style=”background-color:rgba(255, 99, 71, 0.5);”>rgba(255, 99, 71, 0.5)</h1>
<h1 style=”background-color:hsla(9, 100%, 64%, 0.5);”>hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

</body>
</html>