? Color Values in CSS

CSS allows you to specify colors in multiple ways, offering flexibility for design. Here are the most common color value types:

1. Color Keywords

Named colors like red, blue, orange, etc.

color: red;background-color: lightblue;

2. Hexadecimal (Hex) Colors

• Format: #RRGGBB or shorthand #RGB

• Uses hexadecimal values (0–9, A–F) for red, green, blue.

color: #ff0000;   /* red */color: #0f0;      /* shorthand for #00ff00 (green) */

3. RGB Colors

• Format: rgb(red, green, blue)

• Values from 0 to 255 for each channel.

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

4. RGBA Colors

• Like rgb but with an alpha (opacity) channel from 0 (transparent) to 1 (opaque).

color: rgba(255, 0, 0, 0.5); /* semi-transparent red */

5. HSL Colors

• Format: hsl(hue, saturation%, lightness%)

• Hue: angle from 0 to 360° (color type)

• Saturation and lightness: percentage values

color: hsl(0, 100%, 50%);    /* red */color: hsl(120, 100%, 50%);  /* green */color: hsl(240, 100%, 50%);  /* blue */

6. HSLA Colors

• Like hsl but with alpha channel for transparency.

color: hsla(240, 100%, 50%, 0.3); /* semi-transparent blue */

7. CurrentColor Keyword

• Uses the current text color for properties like borders or shadows.

border: 1px solid currentColor;

Summary Table

If you want, I can generate a color palette demo or help you convert colors between these formats!