CSS Colors

Guest · Post by **Guest** » Fri Oct 27, 2023 8:24 am

CSS Colors

CSS supports 140+ color names, HEX values, RGB values, RGBA
values, HSL values, HSLA values, and opacity.

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).
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 example defines different 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 stands for Hue, Saturation and Lightness.
An HSL color value is specified with: hsl(hue, saturation, lightness).

Hue is a 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 the full color.
Lightness is also a percentage; 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 example defines 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%);}   /* pastel green */

Try it Yourself »

HSLA Colors
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity
for a color.
An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the
alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully 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 example defines 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);}   /* pastel green
with opacity */

Try it Yourself »

Opacity
The CSS opacity property sets the opacity for
the whole element (both background color and text will be opaque/transparent).
The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully 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 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;} /* 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 »

Test Yourself With Exercises

Exercise:
Insert the RGBA color value for a full red background color of the <h1> element, with no transparency.

<style>
h1 {
background-color: ;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

Submit Answer »
Start the Exercise

★
+1

Reference: https://www.w3schools.com/css/css3_colors.asp