articles

Home / DeveloperSection / Articles / Different ways to set the color in HTML application by CSS3

Different ways to set the color in HTML application by CSS3

Different ways to set the color in HTML application by CSS3

Vijay Shukla 4646 24-Dec-2012

In this article I have tried to explain how many types we can set the color in HTML application using CSS3.

We can specify colors in HTML application following the different methods which are below:

1.       Hexadecimal colors

2.       RGB colors

3.       RGBA colors

4.       HSL colors

5.       HSLA colors

Hexadecimal Colors:

Hexadecimal numbers are "natural" to computers because computers store and handle binary digits, and four binary digits make one hexadecimal digit. All browsers are supported the Hexadecimal color values, Hexadecimal color syntax are #RRGGBB:

#RRGGBB: RR is informing to Red color GG is informing to Green BB is informing to Blue.

RGB Colors:

It’s also support the all browsers, RGB is an abridgment for "Red Green Blue". RGB is a color model used on displays where red, green, and blue light are combined to make millions of colors.

Syntax:  rgb (red, green, blue)

The following values define the same color: rgb (0, 0,255) and rgb (0%, 0%, 100%).

Above line will make the blue color because intensity of the color an integer between 0 and 255 and 255 is the full value of the blue color and red is 0(zero) and green is also 0(zero).

RGBA Colors:

RGBA stands for Red Green Blue Alpha, It's the extended version of RGB and through the RGBA we can make a color an abbreviation for "Red Green Blue" and with Alpha we give opacity to color, if we give value of Alpha is 0.1 it will make the color fully transparent and if we give the 10 color will make fully opaque. RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.

Syntax:  rgba (red, green, blue, alpha).

HSL Colors:

HSL stands for hue, saturation, and lightness which is represents a cylindrical-coordinate representation of colors. HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.

Syntax: hsl (hue, saturation, lightness).

HSLA Colors:

HSLA stands for hue, saturation, lightness and alpha, HSLA Extended to HSL which is also represents a cylindrical-coordinate representation of colors but alpha make the color transparent. HSLA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.

Syntax: hsla (hue, saturation, lightness, alpha)

Below is Example for all Colors:
<!DOCTYPE html>

<html>
<head>
<style>
.First
{
background-color:#CD853F;
}
.Second
{
background-color:rgb(205,133,63);
}
.Third
{
background-color:rgba(205,133,63,0.5);
}
.Fourth
{
background-color:hsl(20,90%,70%);
}
.Fifth
{
background-color:hsla(20,90%,70%,0.3);
}
</style>
</head>
<body style="width:210px; height: 100px;">
<p class="First">This is for <b> Hexadecimal </b> Colors.</p>
<p class="Second">This is for <b> RGB </b> Colors.</p>
<p class="Third">This is for <b> RGBA </b> Colors.</p>
<p class="Fourth">This is for <b> HSL </b> Colors.</p>
<p class="Fifth">This is for <b> HSLA </b> Colors.</p>
</body>
</html>
Below Is Output: 

Different ways to set the color in HTML application by CSS3



Updated 03-Jan-2020

Leave Comment

Comments

Liked By