CSS Color Values

CSS supports many ways to express colour. Choosing the right format affects readability, maintainability, and the colour space you are working in.

Named Colors

CSS defines 148 named colours, from red and blue to rebeccapurple and cornsilk. They are convenient for quick prototyping.

Hexadecimal

Six-digit hex codes (#RRGGBB) encode red, green, and blue channels as pairs of hex digits (00–FF). A shorthand three-digit form (#RGB) doubles each digit. An optional two-digit alpha suffix gives eight-digit hex (#RRGGBBAA).

RGB / RGBA

rgb(255 99 71) uses modern space-separated syntax. Add a slash and alpha: rgb(255 99 71 / 0.6).

HSL / HSLA

hsl(hue deg, saturation%, lightness%) is human-readable. Adjusting only the lightness creates tints and shades of the same hue.

Example

/* Named colour */
body {
    background-color: whitesmoke;
    color: darkslategray;
}

/* 6-digit hex */
.primary {
    background: #1a73e8;
}

/* 8-digit hex with 80% opacity */
.overlay {
    background: #00000080;
}

/* Modern rgb() */
.card {
    background: rgb(255 255 255);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}

/* HSL — easy to create colour scales */
.success  { color: hsl(142 71% 45%); }
.warning  { color: hsl( 38 92% 50%); }
.danger   { color: hsl(  4 86% 58%); }

CSS

Full Editor

Pro Tip

Use HSL when building colour palettes — it is easy to create consistent tints and shades by adjusting only the lightness value while keeping hue and saturation fixed.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned