WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Colors


CSS3 Colors

CSS bolsters color names, hexadecimal and RGB colors.

In expansion, CSS3 too introduces:

  • RGBA colors
  • HSL colors
  • HSLA colors
  • opacity

Browser Support

The numbers in the table determine the main program form that completely underpins CSS3 color value/property.

Property
RGBA, HSL, and HSLA 4.0 12.0 9.0 3.0 3.1 10.1
opacity 4.0 12.0 9.0 2.0 3.1 10.1

RGBA Colors

RGBA color value are an augmentation of RGB color value with an alpha channel - which indicates the opacity for a color.

An RGBA color esteem is determined with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (completely sample) and 1.0 (completely opaque).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

The following model characterizes distinctive RGBA colors:

Example

#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
Try it yourself »

HSL Colors

HSL represents Hue, Saturation and Lightness.

An HSL color esteem is determined with: hsl(hue, immersion, lightness).

  1. Hue is a degree on the color wheel (from 0 to 360):
    • 0 (or 360) is red
    • 120 is green
    • 240 is blue
  2. Saturation is a rate esteem: 100% is the full color.
  3. Lightness is additionally a rate; 0% is dull (dark) and 100% is white.
hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

The following precedent characterizes distinctive HSL colors:

Example

#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dull green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */
Try it yourself »

HSLA Colors

HSLA color value are an expansion of HSL color value with an alpha channel - which indicates the haziness for a color.

An HSLA color esteem is indicated with: hsla(hue, immersion, daintiness, alpha), where the alpha parameter characterizes the opacity. The alpha parameter is a number between 0.0 (completely sample) and 1.0 (completely opaque).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, half, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

The following precedent characterizes distinctive HSLA colors:

Example

#p1 {background-color: hsla(120, 100%, half, 0.3);} /* green with opacity*/
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dull green with opacity*/
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity*/
Try it yourself »

Opacity

The CSS3 opacityproperty sets the opacity for a predefined RGB value.

The opacityproperty estimation must be a number between 0.0 (completely sample) and 1.0 (completely opaque).

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

Notice that the content above will likewise be opaque.

The following precedent shows distinctive RGB values with opacity:

Example

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity*/
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity*/
Try it yourself »