CSS COLORS

CSS Colors

CSS colors are used to set the color of text, backgrounds, borders, shadows, and many other elements on a web page.

Why Use Colors?

Colors help:

• Improve the appearance of a website.
• Highlight important content.
• Create visual hierarchy.
• Enhance user experience and branding.

---

Ways to Specify Colors in CSS

CSS supports several color formats.

1. Color Names

CSS provides 140+ predefined color names.

Syntax

h1 {
    color: red;
}

Example

body {
    background-color: lightgray;
}

h1 {
    color: blue;
}

p {
    color: green;
}

Common color names:

Color	CSS Name
🔴	red
🟢	green
🔵	blue
⚫	black
⚪	white
🟡	yellow
🟣	purple
🟠	orange
🌸	pink
🌫	gray

---

2. Hexadecimal (HEX) Colors

HEX colors begin with # followed by 6 hexadecimal digits.

Format

#RRGGBB

• RR = Red
• GG = Green
• BB = Blue

Each pair ranges from 00 to FF (0–255).

Examples

h1 {
    color: #FF0000;
}

body {
    background-color: #F5F5F5;
}

Common HEX Colors

Color	HEX
Black	#000000
White	#FFFFFF
Red	#FF0000
Green	#008000
Blue	#0000FF
Yellow	#FFFF00

---

Short HEX

If each pair has identical digits, you can use the 3-digit shorthand.

#FFFFFF → #FFF
#000000 → #000
#FF0000 → #F00

Example:

h1 {
    color: #F00;
}

---

3. RGB Colors

RGB stands for Red, Green, Blue.

Each value ranges from 0 to 255.

Syntax

color: rgb(red, green, blue);

Example

h1 {
    color: rgb(255, 0, 0);
}

More examples:

color: rgb(0, 255, 0);
color: rgb(0, 0, 255);
color: rgb(255, 255, 0);

---

4. RGBA Colors

RGBA adds an Alpha (opacity) value.

Syntax

rgba(red, green, blue, alpha)

Alpha values:

• 0 = Completely transparent
• 1 = Fully visible

Example

background-color: rgba(255, 0, 0, 0.5);

Another example:

div {
    background-color: rgba(0, 0, 255, 0.3);
}

---

5. HSL Colors

HSL stands for:

• H = Hue
• S = Saturation
• L = Lightness

Syntax

hsl(hue, saturation, lightness)

Example:

color: hsl(120, 100%, 50%);

---

Hue

Hue is a degree on the color wheel.

Degree	Color
0°	Red
60°	Yellow
120°	Green
180°	Cyan
240°	Blue
300°	Magenta

---

Saturation

• 0% = Gray
• 100% = Full color

Example:

color: hsl(240, 100%, 50%);

---

Lightness

• 0% = Black
• 50% = Normal
• 100% = White

Example:

color: hsl(0, 100%, 25%);

---

6. HSLA Colors

HSLA is HSL with transparency.

background-color: hsla(200, 100%, 50%, 0.4);

---

Transparent Color

CSS provides a special keyword:

background-color: transparent;

It means the element has no visible background color.

---

currentColor

The currentColor keyword uses the element's current text color.

Example:

button {
    color: blue;
    border: 2px solid currentColor;
}

The border becomes blue because it matches the text color.

---

Applying Colors

Text Color

p {
    color: navy;
}

---

Background Color

body {
    background-color: lightyellow;
}

---

Border Color

div {
    border: 2px solid red;
}

---

Outline Color

input {
    outline: 2px solid blue;
}

---

Box Shadow

div {
    box-shadow: 0 0 10px gray;
}

---

Text Shadow

h1 {
    text-shadow: 2px 2px 5px gray;
}

---

Color Comparison

Method	Example	Transparency
Name	red	❌
HEX	#FF0000	❌
RGB	rgb(255,0,0)	❌
RGBA	rgba(255,0,0,0.5)	✅
HSL	hsl(0,100%,50%)	❌
HSLA	hsla(0,100%,50%,0.5)	✅

---

Complete Example

body {
    background-color: #F4F4F4;
}

h1 {
    color: navy;
}

p {
    color: rgb(50, 50, 50);
}

button {
    background-color: hsl(210, 100%, 50%);
    color: white;
    border: 2px solid currentColor;
}

.card {
    background-color: rgba(0, 128, 255, 0.2);
    border: 1px solid #0080FF;
}

Best Practices

• Use HEX or RGB/RGBA for precise color control.
• Use RGBA or HSLA when you need transparency.
• Choose colors with sufficient contrast for readability and accessibility.
• Reuse a consistent color palette across your website for a professional appearance.
• Consider using CSS custom properties (variables) for frequently used colors in larger projects.