CSS Colors

CSS support More than 140 color namesas well as hexadecimal values, RGB values, RGBA values, HSL values, HSLA values, and opacity.

RGBA color

The RGBA color value is an extension of the RGB color value, with an alpha channel - this channel specifies the opacity of the color.

The RGBA color value is defined as: rgba(red, green, blue, alpha) alpha The parameter is a number between 0.0 (completely transparent) 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 examples define different RGBA colors:

Example

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* Semi-transparent red */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* Semi-transparent green */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* Semi-transparent blue */

Try It Yourself

HSL color

HSL refers to hue, saturation, and lightness (Hue, Saturation, and Lightness).

The HSL color value is defined as: hsl(hue, saturation, lightness).

Hue is the 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 full color.

Brightness is also a percentage value: 0% is dark (black), and 100% is white.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

The following examples define different 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%);}  /* Dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* Light green */

Try It Yourself

HSLA color

HSLA color values are an extension of HSL color values with an Alpha channel - they specify the opacity of the color.

HSLA color values are defined by the following parameters: hsla(hue, saturation, lightness, alpha), where the alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (completely transparent) and 1.0 (completely opaque).

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

The following examples define different HSLA colors:

Example

#p1 {background-color: hsla(120, 100%, 50%, 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);}  /* Dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* Light green with opacity */

Try It Yourself

Opacity

CSS opacity The attribute sets the opacity of the entire element (both background color and text will be opaque/translucent).

opacity The attribute value must be a number between 0.0 (completely transparent) 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;

Note that the text above will also be transparent/opaque!

The following example shows different elements with opacity:

Example

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* Semi-transparent red */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* Semi-transparent green */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* Semi-transparent blue */

Try It Yourself