CSS3 Colors

CSS Color Values

Defining Colors in CSS

CSS offers several ways to specify colors, including predefined color names, hexadecimal codes, RGB, RGBA, HSL, and HSLA values.

Modern additions like RGBA and HSLA allow for specifying opacity directly within the color value.

• Color Names: red, blue, transparent (over 140 names supported)
• Hexadecimal: #RRGGBB or #RGB (e.g., #ff0000, #f00)
• RGB: rgb(red, green, blue) (values 0-255)
• RGBA: rgba(red, green, blue, alpha) (alpha 0.0-1.0)
• HSL: hsl(hue, saturation, lightness) (hue 0-360, sat/light 0%-100%)
• HSLA: hsla(hue, saturation, lightness, alpha) (alpha 0.0-1.0)

Browser Support

All modern browsers fully support these CSS color value formats, including RGBA, HSL, and HSLA.

Color Value/Property	Internet Explorer	Chrome	Firefox	Safari	Opera
RGBA, HSL, HSLA	IE 9+	Chrome	Firefox	Safari	Opera
opacity Property	IE 9+	Chrome	Firefox	Safari	Opera

RGBA Colors

RGBA extends RGB by adding an alpha channel for transparency. rgba(red, green, blue, alpha). The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully opaque).

This is useful for creating semi-transparent backgrounds or text colors without affecting the entire element’s opacity.

Example: Semi-transparent red backgrounds

[Div with background: rgba(255, 0, 0, 0.2);]

[Div with background: rgba(255, 0, 0, 0.5);]

[Div with background: rgba(255, 0, 0, 0.8);]

CSS Example:

.element1 {
  background-color: rgba(255, 0, 0, 0.3); /* Red with 30% opacity */
}
.element2 {
  background-color: rgba(0, 255, 0, 0.3); /* Green with 30% opacity */
}
.element3 {
  background-color: rgba(0, 0, 255, 0.3); /* Blue with 30% opacity */
}

HSL Colors

HSL (Hue, Saturation, Lightness) provides a more intuitive way to define colors based on the color wheel.

• Hue: An angle on the color wheel (0-360 degrees). 0 or 360 is red, 120 is green, 240 is blue.
• Saturation: The intensity of the color (0% is grayscale, 100% is full color).
• Lightness: The brightness (0% is black, 50% is the ‘normal’ color, 100% is white).

Syntax: hsl(hue, saturation%, lightness%)

Example: Variations of green

[Div with background: hsl(120, 100%, 50%); /* Normal Green */]

[Div with background: hsl(120, 100%, 75%); /* Light Green */]

[Div with background: hsl(120, 100%, 25%); /* Dark Green */]

[Div with background: hsl(120, 50%, 70%); /* Pastel Green */]

CSS Example:

.element1 {
  background-color: hsl(120, 100%, 50%); /* Green */
}
.element2 {
  background-color: hsl(120, 100%, 75%); /* Light green */
}
.element3 {
  background-color: hsl(120, 100%, 25%); /* Dark green */
}
.element4 {
  background-color: hsl(120, 60%, 70%);   /* Pastel green */
}

HSLA Colors

HSLA adds an alpha channel to HSL for transparency. hsla(hue, saturation%, lightness%, alpha). The alpha value works the same as in RGBA (0.0 to 1.0).

Example: Semi-transparent green variations

[Div with background: hsla(120, 100%, 50%, 0.3);]

[Div with background: hsla(120, 100%, 75%, 0.3);]

[Div with background: hsla(120, 100%, 25%, 0.3);]

[Div with background: hsla(120, 60%, 70%, 0.3);]

CSS Example:

.element1 {
  background-color: hsla(120, 100%, 50%, 0.3); /* Green with opacity */
}
.element2 {
  background-color: hsla(120, 100%, 75%, 0.3); /* Light green with opacity */
}
.element3 {
  background-color: hsla(120, 100%, 25%, 0.3); /* Dark green with opacity */
}
.element4 {
  background-color: hsla(120, 60%, 70%, 0.3);  /* Pastel green with opacity */
}

The opacity Property

The opacity property sets the transparency level for the entire element, including its content, background, and border.

Value ranges from 0.0 (fully transparent) to 1.0 (fully opaque).

Example: Applying opacity to elements with solid backgrounds

[Div style="background-color: red; opacity: 0.2;"] Text also transparent [/Div]

[Div style="background-color: red; opacity: 0.5;"] Text also transparent [/Div]

[Div style="background-color: red; opacity: 0.8;"] Text also transparent [/Div]

Important: Unlike RGBA/HSLA which affect only a specific color property, opacity affects the element and all its children.

CSS Example:

.element1 {
  background-color: rgb(255, 0, 0); /* Solid red */
  opacity: 0.6; /* Entire element is 60% opaque */
}
.element2 {
  background-color: rgb(0, 255, 0); /* Solid green */
  opacity: 0.6;
}
.element3 {
  background-color: rgb(0, 0, 255); /* Solid blue */
  opacity: 0.6;
}