CSS Colors - Detailed Overview

Introduction to CSS Colors

In CSS, colors can be applied to text, backgrounds, borders, and other elements using various methods. The most common ways to specify colors in CSS are:

Color Names

CSS supports a wide range of color names. For example:

p {
    color: blue;
}

This text is blue.

Hexadecimal Color Codes

Hexadecimal color codes are 6-digit codes representing colors. They start with a hash (#) followed by three pairs of hex digits. For example:

p {
    color: #ff4500;
}

This text is orange-red.

Here is a color box showing the hexadecimal color:

RGB Color Codes

RGB color codes use the RGB color model with values for red, green, and blue. The format is rgb(red, green, blue). For example:

p {
    color: rgb(34, 193, 195);
}

This text is a shade of teal.

Here is a color box showing the RGB color:

RGBA Color Codes

RGBA color codes are similar to RGB but include an alpha (opacity) value. The format is rgba(red, green, blue, alpha). For example:

p {
    color: rgba(255, 99, 71, 0.6);
}

This text is semi-transparent tomato color.

Here is a color box showing the RGBA color:

HSL Color Codes

HSL color codes use the HSL color model with values for hue, saturation, and lightness. The format is hsl(hue, saturation%, lightness%). For example:

p {
    color: hsl(120, 100%, 50%);
}

This text is green.

Here is a color box showing the HSL color:

HSLA Color Codes

HSLA color codes are similar to HSL but include an alpha (opacity) value. The format is hsla(hue, saturation%, lightness%, alpha). For example:

p {
    color: hsla(240, 100%, 50%, 0.3);
}

This text is semi-transparent blue.

Here is a color box showing the HSLA color: