CSS Colors

CSS colors can be specified using various methods including color names, hexadecimal, RGB, RGBA, HSL, and HSLA. Each method has its own use cases and advantages.

Color Methods

Color Names:

CSS provides a set of standard color names that can be used to set colors. For example:

/* Using color names */
body {
    background-color: lightblue;
}

h1 {
    color: darkblue;
}

        

Hexadecimal Colors:

Hexadecimal colors are specified using a six-digit code preceded by a hash symbol. For example:

/* Using hexadecimal colors */
body {
    background-color: #f0f8ff;
}

h1 {
    color: #00008b;
}

        

RGB Colors:

RGB colors are specified using the `rgb()` function with red, green, and blue values. For example:

/* Using RGB colors */
body {
    background-color: rgb(240, 248, 255);
}

h1 {
    color: rgb(0, 0, 139);
}

        

RGBA Colors:

RGBA colors include an alpha (opacity) value in addition to RGB values. For example:

/* Using RGBA colors */
body {
    background-color: rgba(240, 248, 255, 0.8);
}

h1 {
    color: rgba(0, 0, 139, 0.9);
}

        

HSL Colors:

HSL colors are specified using the `hsl()` function with hue, saturation, and lightness values. For example:

/* Using HSL colors */
body {
    background-color: hsl(200, 100%, 97%);
}

h1 {
    color: hsl(240, 100%, 27%);
}

        

HSLA Colors:

HSLA colors include an alpha (opacity) value in addition to HSL values. For example:

/* Using HSLA colors */
body {
    background-color: hsla(200, 100%, 97%, 0.8);
}

h1 {
    color: hsla(240, 100%, 27%, 0.9);
}