CSS Colors

Chapters

CSS Tutorial

In CSS, colors are used to style the appearance of elements, such as the text color, background color, borders, and more. CSS offers various ways to define and apply colors, giving you flexibility in how your designs look.

Ways to Specify Colors in CSS:

Named Colors
Use predefined color names like red, blue, green, etc. p { color: red; }
Hexadecimal Colors
Use a # followed by a 3-digit or 6-digit hexadecimal code. h1 { color: #FF5733; /* Bright orange */ } h2 { color: #0F0; /* Green (shortened format) */ }
RGB Colors
Use the rgb() function to define colors using Red, Green, and Blue values (0–255). div { background-color: rgb(255, 0, 0); /* Red */ } span { background-color: rgb(100, 150, 200); /* Light blue */ }
RGBA Colors
The rgba() function adds transparency to colors using an alpha channel (0 for fully transparent, 1 for fully opaque). section { background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */ }
HSL Colors
Use the hsl() function, which stands for Hue (0–360 degrees), Saturation (0%–100%), and Lightness (0%–100%). article { color: hsl(120, 100%, 50%); /* Pure green */ }
HSLA Colors
Similar to hsl(), but includes an alpha channel for transparency. footer { background-color: hsla(240, 100%, 50%, 0.7); /* Semi-transparent blue */ }

Applying Colors in CSS:

1. Text Color

Use the color property to style the text.

p {
    color: darkblue;
}

2. Background Color

Use the background-color property to set the background color.

body {
    background-color: #f0f8ff;
}

3. Border Color

Use the border-color property to style the border color.

div {
    border: 2px solid rgb(0, 128, 0); /* Green border */
}

Example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Colors</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>CSS Colors</h1>
    <p class="named">This text uses a named color.</p>
    <p class="hex">This text uses a hex color.</p>
    <p class="rgb">This text uses an RGB color.</p>
    <p class="rgba">This text uses an RGBA color with transparency.</p>
    <p class="hsl">This text uses an HSL color.</p>
</body>
</html>

CSS:

body {
    background-color: #f9f9f9; /* Light gray background */
    font-family: Arial, sans-serif;
}

h1 {
    color: hsl(200, 70%, 40%);
}

.named {
    color: red;
}

.hex {
    color: #ff5733; /* Bright orange */
}

.rgb {
    color: rgb(34, 139, 34); /* Forest Green */
}

.rgba {
    color: rgba(0, 0, 255, 0.7); /* Semi-transparent blue */
}

.hsl {
    color: hsl(120, 100%, 40%); /* Green */
}

Output:

Named Colors: red for the first paragraph.
Hexadecimal Colors: A bright orange for the second paragraph.
RGB Colors: A forest green for the third paragraph.
RGBA Colors: A semi-transparent blue for the fourth paragraph.
HSL Colors: A darker green for the fifth paragraph.

Color Reference Tools:

Use online tools like Coolors or Colorzilla to generate and pick colors.
Browsers like Chrome also have built-in color pickers in their developer tools.