CSS Colors.

Learn How to Set Colors in CSS

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 4 mins read

In this tutorial, you will learn how to set colors in CSS. The easiest way is to set a color by its name. The below table shows the names for 16 colors that are supported by all browsers.

CSS Color Names

blacksilverwhiteaqua
redlimegreenmaroon
yellowolivepurpleteal
graybluefuchsianavy

Example to Set Color by Name

color: green;

Another way to set color is to use an RGB (red, green, blue) value. One way to do that is to specify the percent of red, green, and blue that make up the color. The following is an example.

Example to Set a Color With RGB Value

color: rgb(255, 102, 51);  / * Using multiples from 0 to 255 */
color: rgb(100%, 40%, 20%); /* 100% of red, 40% of green and 20% of blue */

You can use hex values for color. To get the hex value of a color, you can use a palette that shows all the colors along with their hex values. The following is an example.

Example to Set a Color With Hex Value

color: #ffffff; /* This color is white */
color: #000000; /* This color is black */
color: #ff0000; /* This color is red */

Most graphic designers use hexadecimal or hex, values to specify an RGB value because that lets them choose from over 16 million colors. To provide even more color options for designers, CSS3 enables you to code color specifications in three more ways.

RGBA Values

First, you can use RGBA values. This works like RGB values, but with a fourth parameter that provides an opacity value. For example, if you set opacity value to 0, the color is fully transparent so anything behind it will show through. The following is the syntax for RGBA:

The Syntax for RGBA Colors

rgba(red%, green%, blue%, opacity-value);

HSL Values

Second, you can use HSL values. To do that, you provide a number from 1 through 359 that represents the hue is one of the main properties of a color. Then you can provide a number from 1 to 100 that represents the saturation percent with 100 being the saturated hue. Last you can provide a number from 0 to 100 that represents the lightness percent with 50 being normal, 100 being white, and 0 being black. The following is the syntax for HSL:

The Syntax for HSL Colors

hsl(hue-degrees, saturation%, lightness%);

HSLA Values

Third, you can use HSLA values. This is just like HSL values, but with a fourth parameter that provides an opacity value between 0 and 1. The following is the syntax for HSLA:

The Syntax for HSLA Colors

hsla(hue-degrees, saturation%, lightness%, opacity-value);

The following figure will give you some idea of how these values work, especially if you see them in color in the eBook.

ValuesDescription
opacity-valueA number from 0 to 1 with 0 being fully transparent and 1 is fully opaque.
hue-degreesA number of degrees ranging from 0 to 359 that represents the color.
saturation%A percentage from 0 to 100 with 0 causing the hue to be ignored and 100 being the full hue.
lightness%A percentage from 0 to 100 with 50 being normal lightness, 0 being black, and 100 being white.

Examples

.p1 {
color: rgba(0, 0, 255, .2);  /* transparent blue */
}

CSS3 Color Specifications

.p2 {
color: hsl(120, 100%, 25%); /* dark green */
}

CSS3 Color Specifications

.p3 {
color: hsl(120, 75%, 75%); /* pastel green */
}

CSS3 Color Specifications

.p4 {
color: hsla(240, 100%, 50%, 0.5); /* semi-transparent solid blue */
}

CSS3 Color Specifications

Notes on CSS Color Specifications

  • RGBA enhances the RGB specifications by providing fourth value for opacity.
  • With HSL (Hue, Saturation, and Lightness) and HSLA, you specify the number of hue degrees for a color. Then, you can enhance the hue by providing for both saturation and lightness percentages.
  • HSLA also offers a fourth parameter for opacity.

Complete Example

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .sec2 {
            font-size: 125%;
        }
        
        .p1 {
            color: rgba(0, 0, 255, .2);
            /* transparent blue */
        }
        
        .p2 {
            color: hsl(120, 100%, 25%);
            /* dark green */
        }
        
        .p3 {
            color: hsl(120, 75%, 75%);
            /* pastel green */
        }
        
        .p4 {
            color: hsla(240, 100%, 50%, 0.5);
            /* semi-transparent solid blue */
        }
    </style>
</head>

<body>
    <section class="sec2">
        <p class="p1">CSS3 Color Specifications</p>

        <p class="p2">CSS3 Color Specifications</p>

        <p class="p3">CSS3 Color Specifications</p>

        <p class="p4">CSS3 Color Specifications</p>
    </section>
</body>

</html>

Output

The output would be as shown in the featured image of this article.

See also: