CSS (Cascading Style Sheets) provides several ways to specify colors. Here are some of the most common methods for defining colors in CSS:

Color Keywords: CSS has a set of predefined color names that you can use directly. For example:css

color: red;
background-color: yellow;

Some commonly used color keywords include red, blue, green, black, white, yellow, orange, and many more.

Hexadecimal Notation: Colors can also be represented using hexadecimal notation, which consists of a pound sign (#) followed by a six-digit hexadecimal code. Each pair of digits represents the intensity of the red, green, and blue (RGB) channels, respectively. For example:

css

color: #FF0000; /* red */
background-color: #00FF00; /* green */

In this example, #FF0000 represents pure red and #00FF00 represents pure green.

RGB Notation: Another way to specify colors in CSS is using the RGB notation, which represents the intensity of the red, green, and blue channels individually. Each channel’s value ranges from 0 to 255. For example:

css

color: rgb(255, 0, 0); /* red */
background-color: rgb(0, 255, 0); /* green */

In this example, rgb(255, 0, 0) represents pure red, and rgb(0, 255, 0) represents pure green.

RGBA Notation: RGBA is similar to RGB but includes an additional alpha channel that represents the opacity or transparency of the color. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque). For example:

css

color: rgba(255, 0, 0, 0.5); /* red with 50% opacity */
background-color: rgba(0, 255, 0, 0.75); /* green with 75% opacity */

In this example, rgba(255, 0, 0, 0.5) represents a semi-transparent red, and rgba(0, 255, 0, 0.75) represents a semi-transparent green.

HSL Notation: CSS3 introduced the HSL (Hue, Saturation, Lightness) color model, which allows you to specify colors based on their hue, saturation, and lightness values. Hue is represented by an angle from 0 to 360, saturation and lightness are percentages ranging from 0% to 100%. For example:

css

color: hsl(0, 100%, 50%); /* red */ background-color: hsl(120, 100%, 50%); /* green */ In this example, hsl(0, 100%, 50%) represents pure red, and hsl(120, 100%, 50%) represents pure green.

These are some of the common ways to specify colors in CSS. It’s worth noting that CSS also supports other color notations, such as HSLA (HSL with alpha) and color functions like rgba(), hsla(), currentColor, and more.