CSS1 Color Property

CSS Color property defines the text color of the HTML elements. In CSS, colors can be specified by 3 common ways:

  1. By using, Color name
  2. By using, Hexadecimal value
  3. By using, RGB value

CSS Color name

Example 1: To change all paragraph text with red color using color name.

p{
   color:red;
}

CSS Hexadecimal value

Example 2: To change all paragraph text with red color using hexadecimal value.

p{
   color:#ff0000;
}

CSS RGB value

Example 3: To change all paragraph text with red color using RGB value.

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

Example 4: Hexadecimal Color codes.

CSS3 color property

In addition, CSS3 introduced following types of colors.

  1. RGBA
  2. HSL
  3. HSLA

CSS3 RGBA Property

RGBA stands for red, green, blue, alpha. It is an extension of RGB color with an alpha channel. Alpha specifies the opacity of a color, its value can be given in between 0.0 (fully transparent) to 1.0 (full opaque).

Example 5: background-color using RGBA value

background-color:rgba(255,0,0,0.3);
background-color:rgba(0,255,0,0.3);
background-color:rgba(0,0,255,.3);
background-color:rgba(255,255,0,0.3);

CSS3 HSL Colors

HSL stands for Hue, Saturation and Lightness.

Hue is a degree on the color wheel (from 0 to 360): 0 (or 360) is red, 120 is green, 240 is blue

Saturation is a percentage value: 100% is the full color.

Lightness is also a percentage; 0% is dark (black) and 100% is white.

Example 6: background-color using HSL value

background-color:hsl(120,100%,75%);
background-color:hsl(120,100%,50%);
background-color:hsl(120,100%,25%);

CSS3 HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel, which specifies the opacity for the color. The alpha value defines the opacity, its value is in between 0.0 (fully transparent) and 1.0 (fully opaque).

Example 7: background-color using HSLA value

background-color: hsla(120, 100%, 75%, 0.3);
background-color: hsla(120, 100%, 50%, 0.3);
background-color: hsla(120, 100%, 25%, 0.3);