CSS Colors

Colors in CSS are used to style elements, affecting properties like text color, background color, and border color. CSS provides several ways to specify colors.

Color Names

CSS supports 140 standard color names:

h1 {
    color: blue;
}
p {
    color: red;
}

Hexadecimal Colors

Hexadecimal colors are defined with a hash symbol (#) followed by six hex digits:

h1 {
    color: #0000FF; /* blue */
}
p {
    color: #FF0000; /* red */
}

RGB Colors

RGB colors are specified using the rgb() function, which defines colors based on their red, green, and blue components:

h1 {
    color: rgb(0, 0, 255); /* blue */
}
p {
    color: rgb(255, 0, 0); /* red */
}

RGBA Colors

RGBA colors are similar to RGB colors, but with an additional alpha component for opacity:

h1 {
    color: rgba(0, 0, 255, 0.5); /* semi-transparent blue */
}
p {
    color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
}

HSL Colors

HSL colors are specified using the hsl() function, which defines colors based on hue, saturation, and lightness:

h1 {
    color: hsl(240, 100%, 50%); /* blue */
}
p {
    color: hsl(0, 100%, 50%); /* red */
}

HSLA Colors

HSLA colors are similar to HSL colors, but with an additional alpha component for opacity:

h1 {
    color: hsla(240, 100%, 50%, 0.5); /* semi-transparent blue */
}
p {
    color: hsla(0, 100%, 50%, 0.5); /* semi-transparent red */
}

Applying Colors

Colors can be applied to various CSS properties:

• color: Sets the text color.
• background-color: Sets the background color.
• border-color: Sets the border color.

div {
    background-color: lightblue;
    border: 2px solid blue;
    color: navy;
}

Conclusion

CSS provides multiple ways to specify colors, including color names, hexadecimal values, RGB, RGBA, HSL, and HSLA. Using these methods, you can style your web elements with precision and creativity.