Colors in HTML

There are various types of colors and there are also various ways to apply colors in html. As mentioned here  RGBA , HSLA , RGB , HSL , HEX , values. You can use colors with color names, for example blue, white and orange etc. You can use colors with hex codes which will be a six-digit code representing the amount of red, green, and blue color. You can use with color decimal or percentage values, all are explained below.

Colors by their name.

<p style="color: red;"> This is a red text </p>

<p style="color: orange;"> This is a orange text </p>

<p style="color: blue;"> This is a blue text </p>

<p style="color: green;"> This is a green text </p>

<p style="color: yellow;"> This is a yellow text </p>


RGB color syntax

We use RGB to make colors more attractive. Some browsers are not supporting rgb colors.

This is a box.

<div style="background-color:rgb(100,95,200); height:90px; width:300px;">
<P> This is a box. </P>
</div>

Example of RGB color syntax

This is a box.

<div style="background-color:rgb(50,200,99); height:90px; width:300px;">
<p> This is a box. </p>
</div>


HEX color syntax

We also use HEX to make colors more attractive. As the name show these colors are in the form of hexa decimal.

This is a box.

<div style="background-color:#C75D4D; height:90px; width:300px;">
<p> This is a box. </p>
</div>

Example of HEX color syntax

This is a box.

<divstyle="background-color:#8B2500; height:90px; width:300px;">
<p> This is a box. </p>
</div>


HSL color syntax

We use HSL to make colors more attractive. As the name shows it is hue, saturation, lightness code of colors.

This is a box.

<div style="background-color:hsl(10,90%,50%); height:90px; width:300px;">
<p> This is a box. </p>
</div>

Example of HSL color syntax

This is a box.

<div style="background-color:hsl(120,100%,50%); height:90px; width: 300px;">
<p> This is a box.</p>
</div>

Explore more about html colors visit this link HTML color picker







The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.


ads