CSS Color Values

CSS Colors

Color in CSS can be written as one of more than 140 names, or as a HEX, RGB, RGBA, HSL or HSLA value, and there is also opacity.

RGBA Colors

Take an RGB color, add an alpha channel to control its opacity, and you have RGBA.

The notation is rgba(red, green, blue, alpha).

Alpha is a number running from 0.0 (fully transparent) up to 1.0 (fully opaque).

Example

Three paragraphs, each with its own RGBA background.

Prompt
Create a page with three paragraphs, each with a different RGBA background color at 0.3 opacity: red rgba(255,0,0,0.3), green rgba(0,255,0,0.3), and blue rgba(0,0,255,0.3).
Output: complete HTML page

RGBA syntax

styles.css 
rgba(red, green, blue, alpha)

RGBA opacity values

The red stays constant here while the alpha value changes.

styles.css 
rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

HSLA Colors

HSLA follows the same idea starting from HSL: the extra alpha channel decides how opaque the color is.

Its notation is hsla(hue, saturation, lightness, alpha).

Once again, alpha goes from 0.0 (fully transparent) up to 1.0 (fully opaque).

Example

Four paragraphs, each with its own HSLA background.

Prompt
Create a page with four paragraphs using HSLA background colors at 0.3 opacity: green hsla(120,100%,50%,0.3), light green hsla(120,100%,75%,0.3), dark green hsla(120,100%,25%,0.3), and pastel green hsla(120,60%,70%,0.3).
Output: complete HTML page

HSLA syntax

styles.css 
hsla(hue, saturation, lightness, alpha)

HSLA opacity values

The red hue and the 0.3 opacity stay constant here while the lightness changes.

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

CSS opacity Property

Rather than affecting one color, the opacity property applies to the whole element, so its background color and its text turn transparent together.

Its value has to be a number from 0.0 (fully transparent) to 1.0 (fully opaque).

Note: Any text in the element takes on the same transparency or opacity.

Example

All three paragraphs combine an RGB background color with an opacity of 0.6.

Prompt
Create a page with three paragraphs using RGB background colors and the CSS opacity property set to 0.6: red rgb(255,0,0), green rgb(0,255,0), and blue rgb(0,0,255). Show that opacity affects both background and text.
Output: complete HTML page