CSS Colors - Valid Color text,Keyword Colors, Hexadecimal, RGB, HSL,HSLA Colors

CSS (Cascading Style Sheets) allows you to define colors using a variety of methods. Here are some common ways to specify colors in CSS along with examples:

Keyword Colors:

CSS provides a set of named color keywords that you can use. Here are a few examples:

color: red; background-color: blue;

Hexadecimal Colors:

You can specify colors using hexadecimal values, which represent the red, green, and blue (RGB) components. Hexadecimal colors are prefixed with a #. For example:

color: #FF0000; /* Red */ background-color: #00FF00; /* Green */

RGB Colors:

You can specify colors using the RGB function, which allows you to specify the red, green, and blue values. Here’s an example:

color: rgb(255, 0, 0); /* Red */ RGBA Colors: RGBA is similar to RGB but includes an alpha channel for transparency. You can specify the opacity as a value between 0 and 1. For example:

background-color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue */

HSL Colors:

HSL stands for Hue, Saturation, and Lightness. It’s another way to specify colors. Here’s an example:

color: hsl(120, 100%, 50%); /* Green */

HSLA Colors:

HSLA is similar to HSL but includes an alpha channel for transparency. For example:

background-color: hsla(0, 100%, 50%, 0.5); /* Semi-transparent red */

Named Colors:

CSS also includes a list of named colors that you can use. Some common named colors include “red,” “green,” “blue,” “yellow,” and more.

Here’s a simple HTML and CSS example that demonstrates the use of some of these color methods:


<!DOCTYPE html>
<html>
<head>
    <style>
        .red-text {
            color: red;
        }
        .hex-text {
            color: #00FF00;
        }
        .rgb-text {
            color: rgb(0, 0, 255);
        }
        .hsl-text {
            color: hsl(120, 100%, 50%);
        }
        .named-text {
            color: blue;
        }
    </style>
</head>
<body>
    <p class="red-text">This is red text.</p>
    <p class="hex-text">This is green text using hexadecimal color.</p>
    <p class="rgb-text">This is blue text using RGB color.</p>
    <p class="hsl-text">This is green text using HSL color.</p>
    <p class="named-text">This is blue text using a named color.</p>
</body>
</html>
Screenshot-2023-11-08-154955 In this example, each paragraph uses a different method to set the text color. You can create similar styles for background colors and experiment with different color values to achieve your desired look.
Previous
The Fundamental Concept in Web design and Layout of CSS Box Model.
Next
CSS Texts - Color, Alignment, Decoration, transformation, Spacing - letter-spacing, text-indent, line-height