Colors and backgrounds are fundamental parts of web design. CSS provides multiple ways to define colors and control the appearance of backgrounds.

Colors help:

• Improve Design
• Enhance Readability
• Create Branding
• Improve User Experience

---

CSS Colors

CSS supports multiple color formats.

• RGB
• RGBA
• HSL
• HSLA
• HEX
• Named Colors

---

RGB Colors

RGB stands for:

• Red
• Green
• Blue

Each value ranges from 0–255.

color: rgb(red, green, blue);

Examples:

color: rgb(255, 0, 0);

color: rgb(0, 255, 0);

color: rgb(0, 0, 255);

color: rgb(0, 0, 0);

color: rgb(255, 255, 255);

Example:

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

---

RGBA Colors

RGBA adds an Alpha channel for transparency.

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

Alpha values:

0   → Fully Transparent
0.5 → 50% Visible
1   → Fully Visible

Examples:

color: rgba(255, 0, 0, 1);

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

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

Example:

.card {
    background-color: rgba(0, 0, 0, 0.5);
}

RGBA is commonly used for overlays and transparent backgrounds.

---

HSL Colors

HSL stands for:

• Hue
• Saturation
• Lightness

color: hsl(hue, saturation, lightness);

Hue

0   → Red
120 → Green
240 → Blue
360 → Red

Saturation

0%   → Gray
100% → Full Color

Lightness

0%   → Black
50%  → Normal
100% → White

Examples:

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

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

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

Example:

button {
    background-color: hsl(220, 90%, 55%);
}

---

HSLA Colors

HSLA combines HSL with transparency.

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

Example:

background-color: hsla(220, 100%, 50%, 0.5);

Common use:

.card {
    background: hsla(255, 255%, 255%, 0.2);
}

HSLA is often used for glassmorphism and translucent UI.

---

HEX Colors

HEX (Hexadecimal) is the most commonly used color format in modern CSS.

color: #RRGGBB;

Examples:

color: #000000;

color: #FFFFFF;

color: #FF0000;

color: #0000FF;

HEX also supports shorthand notation.

#FFFFFF → #FFF

Popular colors:

#2563EB
#3B82F6
#10B981
#111827
#F9FAFB

---

Named Colors

CSS provides predefined color names.

Examples:

color: red;
color: blue;
color: green;
color: orange;
color: purple;

Example:

h1 {
    color: navy;
}

Common named colors:

Color	Value
red	Red
blue	Blue
green	Green
black	Black
white	White
yellow	Yellow
orange	Orange
purple	Purple
gray	Gray
navy	Navy

---

Background Color

The background-color property changes the background color of an element.

background-color: value;

Example:

div {
    background-color: lightblue;
}

Using HEX:

.hero {
    background-color: #2563EB;
}

Using RGB:

.hero {
    background-color: rgb(37, 99, 235);
}

---

Background Image

The background-image property adds an image as the background.

background-image: url("image.jpg");

Example:

.hero {
    background-image: url("hero.jpg");
}

Complete example:

.hero {

    background-image: url("hero.jpg");

    height: 500px;

}

---

Background Gradients

Gradients create smooth transitions between colors without using images.

Linear Gradient

background: linear-gradient(color1, color2);

Example:

background: linear-gradient(
    blue,
    purple
);

Left to right:

background: linear-gradient(
    to right,
    blue,
    purple
);

Three colors:

background: linear-gradient(
    to right,
    blue,
    purple,
    pink
);

---

Radial Gradient

Creates a circular gradient.

background: radial-gradient(
    red,
    yellow
);

Example:

.hero {

    background: linear-gradient(
        135deg,
        #2563EB,
        #9333EA
    );

}

---

Background Position

The background-position property controls where the background image appears.

background-position: center;

Common values:

center
top
bottom
left
right

Example:

.hero {

    background-image: url("hero.jpg");

    background-position: center;

}

Using coordinates:

background-position: 50% 50%;

Horizontal → 50%
Vertical   → 50%

---

Background Size

Controls how the background image is resized.

Cover:

background-size: cover;

The image fills the container.

Contain:

background-size: contain;

The entire image remains visible.

Example:

.hero {

    background-image: url("hero.jpg");

    background-size: cover;

    background-position: center;

}

---

Background Attachment

Controls whether the background scrolls with the page.

Default:

background-attachment: scroll;

Fixed:

background-attachment: fixed;

Example:

.hero {

    background-image: url("hero.jpg");

    background-attachment: fixed;

}

Behavior:

Scroll
Page Moves
Background Moves

Fixed
Page Moves
Background Stays

---

Complete Example

.hero {

    height: 100vh;

    background-image: url("hero.jpg");

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

}

Modern gradient example:

.hero {

    background: linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

}

---

Best Practices

Use HEX for branding colors.

color: #2563EB;

---

Use RGBA or HSLA for transparency.

background: rgba(0, 0, 0, 0.5);

---

Use gradients sparingly.

background: linear-gradient(
    #2563EB,
    #7C3AED
);

---

Optimize background images.

• Use WebP
• Compress images
• Use responsive image sizes

---

Use cover for hero sections.

background-size: cover;

---

Key Takeaway

Colors and backgrounds define the visual identity of a website.

.hero {

    background: linear-gradient(
        135deg,
        #2563EB,
        #7C3AED
    );

    color: white;

}

Modern websites commonly use:

• HEX for branding colors
• RGBA / HSLA for transparency
• Gradients for hero sections
• Background images for visual appeal