css - Color Specification in CSS

In CSS (Cascading Style Sheets), colors are used to style the appearance of elements like text, backgrounds, borders, and more. CSS allows you to specify colors in several different formats depending on your design needs.

1. Named Colors

CSS has a list of predefined color names like red, blue, green, black, white, and many others.

h1 {
  color: blue;
}

2. Hexadecimal Values (#RRGGBB)

Hex (hexadecimal) codes are six-digit codes that represent RGB (Red, Green, Blue) color values.

p {
  color: #ff5733; /* a shade of orange */
}

• #ff0000 = red

• #00ff00 = green

• #0000ff = blue

3. RGB Values (rgb(R, G, B))

You can define colors using rgb() with numeric values between 0 and 255.

div {
  background-color: rgb(255, 255, 0); /* yellow */
}

4. RGBA (rgba(R, G, B, A))

The rgba() function is like rgb() but with an extra alpha value (A) for transparency (0 = fully transparent, 1 = fully opaque).

div {
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
}

5. HSL (hsl(H, S%, L%))

HSL stands for Hue, Saturation, and Lightness.

• Hue: degree on the color wheel (0–360)

• Saturation: intensity of the color (0%–100%)

• Lightness: brightness (0%–100%)

h2 {
  color: hsl(120, 100%, 50%); /* bright green */
}

6. HSLA (hsla(H, S%, L%, A))

Same as HSL but with an alpha channel for transparency.

section

{

background-color: hsla(240, 100%, 50%, 0.3);

}