Different Methods to define colors in HTML using CSS

To add colors in a HTML web page we use CSS . A CSS color can be either a keyword or a numerical specification(according to W3C).In CSS we can define colors in five different way:



 

1. Predefined Colors
2. Hexadecimal Colors
3. RGB Colors
4. RGBA Colors
5. HSL Colors

 now we will discuss how to apply colors to HTML webpage.

1.Predefined Colors 

    According to the W3School there are 140 predefined Color Names Supported by All Browsers  in the HTML and CSS color specification and 17 standard colors.Here is the list of all 17 standard colors:

1.aqua    2.black    3.blue   4. fuchsia    
5.gray     6.green   7.lime    8.maroon    
9.navy   10.olive   11.purple 12.red    
13.silver   14.teal    15.white    16.yellow

You can find more color keywords on this link .

To define color on this way use the code bellow :

suppose you are applying color on a paragraph

p
{
Background-color:”blue”;
}

2.Hexadecimal Colors

The Hexadecimal Colors are string of color codes preceded by # sign.The syntax of hexadecimal color is #RRGGBB.The hexadecimal #RRGGBB has a red, green, and blue component in them.

To define color on this way use the code bellow :

suppose you are applying color on a paragraph

p
{
Background-color:”#00FFFF”;//Aqua 
}

 3.RGB Colors

 The format of an RGB color number is rgb(red,green,blue); .The red,green,blue are numerical values from 0 to 255 or percentage values from 0% to 100%. So, the color red is written rgb(255,0,0) or rgb(100%,0%,0%) .

To define color on this way use the code bellow :

suppose you are applying color on a paragraph

p
{
Background-color: rgb(255,0,0); 
}

 4.RGBA Colors

 RGBA color values allows you to define the opacity of the color. It is written in rgba(red,green,blue,opacity) format.

To define color on this way use the code bellow :

suppose you are applying color on a paragraph

p
{
background: rgba(255, 0, 0, 0.2);
}

5.HSL Colors

HSL stands for Hue Saturation Lightness.

Hue: It is a degree on the color wheel. 0 (or 360) is red, 120 is green, 240 is blue. Numbers in between reflect different shades.

Saturation: It is a percentage value; 100% is the full colour.Lightness is also a percentage. 0% for dark (black), 100% for light (white), and 50% fo the average.

To define color on this way use the code bellow :

suppose you are applying color on a paragraph

p
{
background-color: hsl(0,100%, 50%);
}

If you have any questions related to this feel free post your problem on comment box.Thank you.