CSS Colors

In Cascading Style Sheets (CSS), colors are used to define the visual appearance of elements on a webpage. CSS offers various ways to specify colors, including named colors, hexadecimal notation, RGB (Red, Green, Blue) values, RGBA (Red, Green, Blue, Alpha) values, HSL (Hue, Saturation, Lightness) notation, and HSLA (Hue, Saturation, Lightness, Alpha) notation.

Named Colors: CSS provides a set of predefined color names that you can use directly in your stylesheets. Some common examples include red, blue, green, yellow, black, white, etc. For example:

Example

  body {
    background-color: red;
    color: white;
}

You can click on above box to edit the code and run again.

Output

some text.....

Hexadecimal Notation: Colors can also be specified using hexadecimal notation, which represents the intensity of the red, green, and blue channels using hexadecimal digits (0-9, A-F). Hexadecimal colors are preceded by a hash (#) symbol. For example:

Example

body {
    background-color: #FF0000; /* Red */
    color: #FFFFFF; /* White */
}

You can click on above box to edit the code and run again.

Output

some text.....

RGB and RGBA Values: Colors can be specified using RGB values, where each component (red, green, blue) is represented by an integer value between 0 and 255. RGBA values include an additional alpha channel to control opacity, represented by a value between 0 (completely transparent) and 1 (completely opaque). For example:

Example

body {
    background-color: rgb(255, 0, 0); /* Red */
    color: rgba(255, 255, 255, 0.5); /* White with 50% opacity */
}

You can click on above box to edit the code and run again.

Output

some text.....

HSL and HSLA Notation: HSL notation represents colors using their hue, saturation, and lightness. Hue is represented as an angle between 0 and 360, saturation and lightness are represented as percentages (0% to 100%). HSLA notation is similar to HSL, but includes an alpha channel for opacity. For example:

Example

body {
     background-color: hsl(0, 100%, 50%); /* Red */
     color: hsla(0, 100%, 100%, 0.5); /* White with 50% opacity */
}

You can click on above box to edit the code and run again.

Output

some text.....

These are the primary methods for specifying colors in CSS. Choosing the appropriate color format depends on factors such as ease of use, browser compatibility, and the specific requirements of your design.