CSS Colors

Colors make webpages attractive and improve the user experience. CSS provides multiple ways to define colors.

CSS Color Properties

• color - Changes text color.
• background-color - Changes background color.
• border-color - Changes border color.
• box-shadow - Adds colored shadows.

h1{

    color:blue;

}

body{

    background-color:lightgray;

}

CSS supports more than 140 predefined color names.

Example

h1{

    color:red;

}

p{

    color:green;

}

body{

    background-color:lightyellow;

}

HEX (Hexadecimal) color values begin with the # symbol followed by six hexadecimal digits.

Example

h1{

    color:#ff0000;

}

body{

    background:#f5f5f5;

}

RGB stands for Red, Green, and Blue. Each color component has a value between 0 and 255.

h1{

    color:rgb(255,0,0);

}

p{

    color:rgb(0,128,0);

}

RGBA is similar to RGB, but it includes an additional Alpha value for transparency.

div{

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

}

HSL stands for Hue, Saturation, and Lightness. It is an easy way to create and adjust colors.

• Hue: 0° to 360°
• Saturation: 0% to 100%
• Lightness: 0% to 100%

h1{

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

}

p{

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

}

HSLA adds an Alpha value to HSL for transparency.

div{

    background:hsla(240,100%,50%,0.4);

}

Transparency makes elements partially or completely see-through. It is commonly created using RGBA or HSLA values.

.box{

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

}

.card{

    background:hsla(200,100%,50%,0.2);

}

Uses

• Image overlays
• Popup backgrounds
• Transparent buttons
• Modern UI cards

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

body{

    background-color:#f5f5f5;

}

div{

    background-color:lightblue;

}

The color property changes the color of text.

h1{

    color:darkblue;

}

p{

    color:#555;

}

a{

    color:rgb(255,0,0);

}

Best Practices

• Choose colors with sufficient contrast.
• Keep text easy to read.
• Avoid using too many bright colors.
• Use consistent colors throughout the website.

CSS allows you to apply colors to borders and shadows, making your webpage more attractive and visually appealing.

Border Color Example

.box{

    border:3px solid blue;

}

Box Shadow Example

.card{

    box-shadow:0 4px 10px rgba(0,0,0,0.3);

}

Text Shadow Example

h1{

    color:navy;

    text-shadow:2px 2px 5px gray;

}

• Use consistent colors throughout the website.
• Maintain sufficient contrast between text and background.
• Limit the number of colors used on a page.
• Use HEX or RGB values for brand colors.
• Use RGBA or HSLA for transparent effects.
• Choose colors that match your website's theme.
• Test color combinations on different devices.
• Use online color palette tools for better combinations.

❌ Poor Contrast

body{

    background:white;

    color:#f2f2f2;

}

✔ Better Contrast

body{

    background:white;

    color:#222;

}

1. What are CSS colors?
2. Name different ways to specify colors in CSS.
3. What is the difference between RGB and RGBA?
4. What is a HEX color value?
5. What is the purpose of the Alpha value?
6. What does HSL stand for?
7. What is the difference between HSL and HSLA?
8. Which property changes text color?
9. Which property changes background color?
10. Why is color contrast important?

In this lesson, you learned:

• ✔ Introduction to CSS Colors.
• ✔ Color Names.
• ✔ HEX Colors.
• ✔ RGB Colors.
• ✔ RGBA Colors.
• ✔ HSL Colors.
• ✔ HSLA Colors.
• ✔ Transparent Colors.
• ✔ Background Colors.
• ✔ Text Colors.
• ✔ Border and Shadow Colors.
• ✔ Best Practices and Common Mistakes.