CSS Colors

❮ Previous Next ❯

HTML allows you to use various ways to specify colors in CSS. These include 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity.

RGBA Colors

"RGBA colors are similar to RGB colors, but they come with something extra called an alpha channel. This alpha channel helps you know how see-through or solid a color appears."

In HTML, you can set a color using RGBA, which stands for red, green, blue, and alpha. The alpha value can go from 0.0 (fully transparent) to 1.0 (completely solid).

rgba(255, 0, 0, 0.2);

rgba(255, 0, 0, 0.4);

rgba(255, 0, 0, 0.6);

rgba(255, 0, 0, 0.8);

Here is an example that shows various 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 is short for Hue, Saturation, and Lightness.

You can use three values to explain an HSL color: hue, saturation, and 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 example below shows various 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 colors are similar to HSL colors, but they have an added feature called an alpha channel. The alpha channel indicates how much you can see through the color, whether it's transparent or solid.

You can specify a color in HSLA format like this: hsla(hue, saturation, lightness, alpha). The alpha value in this format indicates how transparent or solid the color appears. Alpha can range from 0.0 (fully transparent) to 1.0 (fully solid).

hsla(0, 100%, 30%, 0.3);

hsla(0, 100%, 50%, 0.3);

hsla(0, 100%, 70%, 0.3);

hsla(0, 100%, 90%, 0.3);

In this example, we specify various colors using HSLA.

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 code for "opacity" can either make things inside a box transparent or completely visible. This includes the background color and text within the box.

The opacity property should be set with a number between 0.0 (completely invisible) and 1.0 (completely visible).

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;

Please note that the text above can also be see-through or not see-through, depending on its transparency settings.

In this example, you can see various elements that have different levels of transparency.

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 »

<!DOCTYPE html>
<html>
  <head>
    <style>
      #p1 {
        background-color: rgba(255, 0, 0, 0.3);
      }

      #p2 {
        background-color: rgba(0, 255, 0, 0.3);
      }

      #p3 {
        background-color: rgba(0, 0, 255, 0.3);
      }

      #p4 {
        background-color: rgba(192, 192, 192, 0.3);
      }

      #p5 {
        background-color: rgba(255, 255, 0, 0.3);
      }

      #p6 {
        background-color: rgba(255, 0, 255, 0.3);
      }
    </style>
  </head>
  <body>
    <h1>Define Colors With RGBA Values</h1>
    <p id="p1">Red</p>
    <p id="p2">Green</p>
    <p id="p3">Blue</p>
    <p id="p4">Grey</p>
    <p id="p5">Yellow</p>
    <p id="p6">Cerise</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      #p1 {
        background-color: hsl(120, 100%, 50%);
      }

      #p2 {
        background-color: hsl(120, 100%, 75%);
      }

      #p3 {
        background-color: hsl(120, 100%, 25%);
      }

      #p4 {
        background-color: hsl(120, 60%, 70%);
      }

      #p5 {
        background-color: hsl(290, 100%, 50%);
      }

      #p6 {
        background-color: hsl(290, 60%, 70%);
      }
    </style>
  </head>
  <body>
    <h1>Define Colors With HSL Values</h1>
    <p id="p1">Green</p>
    <p id="p2">Light green</p>
    <p id="p3">Dark green</p>
    <p id="p4">Pastel green</p>
    <p id="p5">Violet</p>
    <p id="p6">Pastel violet</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      #p1 {
        background-color: hsla(120, 100%, 50%, 0.3);
      }

      #p2 {
        background-color: hsla(120, 100%, 75%, 0.3);
      }

      #p3 {
        background-color: hsla(120, 100%, 25%, 0.3);
      }

      #p4 {
        background-color: hsla(120, 60%, 70%, 0.3);
      }

      #p5 {
        background-color: hsla(290, 100%, 50%, 0.3);
      }

      #p6 {
        background-color: hsla(290, 60%, 70%, 0.3);
      }
    </style>
  </head>
  <body>
    <h1>Define Colors With HSLA Values</h1>
    <p id="p1">Green</p>
    <p id="p2">Light green</p>
    <p id="p3">Dark green</p>
    <p id="p4">Pastel green</p>
    <p id="p5">Violet</p>
    <p id="p6">Pastel violet</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      #p1 {
        background-color: rgb(255, 0, 0);
        opacity: 0.6;
      }

      #p2 {
        background-color: rgb(0, 255, 0);
        opacity: 0.6;
      }

      #p3 {
        background-color: rgb(0, 0, 255);
        opacity: 0.6;
      }

      #p4 {
        background-color: rgb(192, 192, 192);
        opacity: 0.6;
      }

      #p5 {
        background-color: rgb(255, 255, 0);
        opacity: 0.6;
      }

      #p6 {
        background-color: rgb(255, 0, 255);
        opacity: 0.6;
      }
    </style>
  </head>
  <body>
    <h1>Define Colors With Opacity</h1>
    <p id="p1">Red</p>
    <p id="p2">Green</p>
    <p id="p3">Blue</p>
    <p id="p4">Grey</p>
    <p id="p5">Yellow</p>
    <p id="p6">Cerise</p>
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid

CSS Colors

RGBA Colors

Example

HSL Colors

Example

HSLA Colors

Example

Opacity

Example

Web Development