Alright Raj, let’s break down CSS colors into a neat, detailed guide — from color names to color formats like RGB, HEX, HSL, plus background, text, and border colors — so you’ll have the complete picture.

---

1. CSS Colors

In CSS, colors can be applied to text, backgrounds, borders, shadows, and more.
You can define colors in different formats such as:

• Color Names
• HEX Values
• RGB / RGBA Values
• HSL / HSLA Values

---

2. CSS Color Names

CSS supports 147 predefined color names (like red, blue, green, etc.) that browsers understand.

Examples:

color: red;       /* Text will be red */
background-color: lightblue; /* Background will be light blue */
border-color: gold; /* Border will be gold */

Few common color names:

Name	Preview	Code
Red		red
Green		green
Blue		blue
Black		black
White		white

---

3. RGB Values

RGB stands for Red, Green, Blue — colors are made by mixing these three light colors.

Syntax:

color: rgb(red, green, blue);

• Each value: 0 to 255

Example:

color: rgb(255, 0, 0); /* Red */
color: rgb(0, 255, 0); /* Green */
color: rgb(0, 0, 255); /* Blue */

---

4. HEX Values

HEX (hexadecimal) uses a # followed by a 6-digit code.

Syntax:

color: #RRGGBB;

• RR = red, GG = green, BB = blue
• Each pair: 00 to FF (hexadecimal)

Example:

color: #ff0000; /* Red */
color: #00ff00; /* Green */
color: #0000ff; /* Blue */

Short form: #f00 = #ff0000

---

5. HSL Values

HSL stands for Hue, Saturation, Lightness.

Syntax:

color: hsl(hue, saturation%, lightness%);

• Hue: 0–360 (color wheel angle)
• Saturation: % (0% = gray, 100% = full color)
• Lightness: % (0% = black, 50% = normal, 100% = white)

Example:

color: hsl(0, 100%, 50%); /* Red */
color: hsl(120, 100%, 50%); /* Green */
color: hsl(240, 100%, 50%); /* Blue */

---

6. RGBA Values

RGBA is like RGB but with an alpha channel for transparency.

Syntax:

color: rgba(red, green, blue, alpha);

• Alpha: 0.0 (fully transparent) to 1.0 (fully opaque)

Example:

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

---

7. HSLA Values

HSLA is the HSL model with an alpha channel.

Syntax:

color: hsla(hue, saturation%, lightness%, alpha);

Example:

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

---

8. CSS Background Color

You can set the background of an element using:

background-color: lightblue;
background-color: #ffcc00;
background-color: rgb(255, 255, 0);

Example:

body {
  background-color: #f0f0f0;
}

---

9. CSS Text Color

Controls the text color:

color: navy;
color: #333333;
color: rgba(255, 255, 255, 0.8);

---

10. CSS Border Color

Controls the color of borders:

border: 2px solid red;
border-color: #00ff00;

---

11. CSS Color Values – Summary Table

Format	Example	Range/Details
Name	red	147 names
HEX	#ff0000	00–FF per color
RGB	rgb(255,0,0)	0–255
RGBA	rgba(255,0,0,0.5)	RGB + transparency
HSL	hsl(0,100%,50%)	Hue 0–360, Sat/Light 0–100%
HSLA	hsla(0,100%,50%,0.5)	HSL + transparency