In CSS there are many ways to express a color value. The method chosen will likely depend on the color itself and whether or not there’s transparency.

There are 140 color names predefined in HTML/CSS.

p {
    color: red;
}

p {
    color: #ff0000; /* red */
}

As shown above, a hexadecimal color is specified with: #RRGGBB. To add transparency, add two additional digits between 00 and FF.

p {
    color: #ff00007f; /* red with 0.5 opacity */
}

An RGB color value is specified with the rgb() function, which has the following syntax: rgb(red, green, blue).

Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255, or a percentage value (from 0% to 100%).

p {
    color: rgb(255, 0, 0); /* red */
}

p {
    color: rgb(100%, 0%, 0%); /* red */
}

An RGBA color value adds an alpha channel to the end of the rgb() function making it rgba(red, green, blue, alpha).

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

p {
    color: rgb(255, 0, 0, 0.5); /* red with 0.5 opacity */
}

p {
    color: rgb(100%, 0%, 0%, 0.5); /* red with 0.5 opacity */
}

The HSL color value is specified with the hsl() function, which has the following syntax: 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 – 0% means a shade of gray and 100% is the full color
• Lightness is also a percentage – 0% is black, 100% is white

p {
    color: hsl(0, 100%, 50%); /* red */
}

p {
    color: hsl(0, 100%, 75%); /* dark red */
}

The HSLA color value adds an alpha channel to the end of the hsl() function making it hsla(hue, saturation, lightness, alpha).

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

p {
    color: hsla(0, 100%, 50%, 0.5); /* red with 0.5 opacity */
}

---