CSS Colors Advanced

CSS Advanced Colors

In addition to standard color names, CSS supports several other color formats.

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

HSL Colors

HSL stands for Hue, Saturation, and Lightness.

HSL color values are specified with: hsl(hue, saturation, lightness).

• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
• Saturation is a percentage value. 0% is a shade of gray, and 100% is the full color.
• Lightness is also a percentage. 0% is black, 50% is neither light nor dark, 100% is white.

HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.

p {
  background-color: rgba(255, 0, 0, 0.3); /* Red with opacity */
  color: hsl(120, 100%, 50%); /* Green */
}