CSS Colors

CSS Color Properties

CSS provides several ways to specify colors. The main property is color for text color, and background-color for background colors.

Color Values

Named Colors

CSS supports 140+ color names:

p {
    color: red;
    background-color: blue;
}

Hexadecimal Colors

Colors can be specified using hexadecimal values:

h1 {
    color: #4b3190;  /* Purple */
}

h2 {
    color: #fdbb30;  /* Yellow/Gold */
}

RGB Colors

Colors can be specified using RGB values:

p {
    color: rgb(75, 49, 144);  /* Purple */
}

div {
    background-color: rgb(253, 187, 48);  /* Yellow/Gold */
}

RGBA Colors

RGBA adds an alpha channel for transparency (0 to 1):

div {
    background-color: rgba(75, 49, 144, 0.5);  /* 50% transparent purple */
}

HSL Colors

HSL (Hue, Saturation, Lightness):

p {
    color: hsl(260, 50%, 40%);  /* Purple */
}

HSLA Colors

HSLA adds an alpha channel:

div {
    background-color: hsla(260, 50%, 40%, 0.5);
}

Common Color Properties

• color - Text color
• background-color - Background color
• border-color - Border color
• outline-color - Outline color

Color Examples

.primary {
    color: #4b3190;
    background-color: #fdbb30;
}

.secondary {
    color: white;
    background-color: #4b3190;
}