CSS Colors

Color is everywhere in CSS. Let's explore every way to define colors.

Named Colors

color: red;
color: cornflowerblue;
color: rebeccapurple;

There are 147 named colors. Useful for prototyping but limiting for design.

Hexadecimal

color: #ff0000;     /* Red */
color: #3498db;     /* Nice blue */
color: #333;        /* Shorthand for #333333 */
color: #3498db80;   /* With 50% alpha */

RGB / RGBA

color: rgb(52, 152, 219);           /* Blue */
color: rgba(52, 152, 219, 0.5);     /* 50% transparent */

/* Modern syntax (no commas) */
color: rgb(52 152 219 / 50%);

HSL / HSLA

color: hsl(204, 70%, 53%);           /* Blue */
color: hsla(204, 70%, 53%, 0.5);     /* 50% transparent */

/* Modern syntax */
color: hsl(204 70% 53% / 50%);

When to Use Which

• HSL — best for creating color palettes (easy to adjust lightness/saturation)
• Hex — most common, compact, supported everywhere
• RGB — when you need alpha transparency
• Named — quick prototyping only

Creating Color Palettes with HSL

:root {
    --primary: hsl(210, 70%, 50%);
    --primary-light: hsl(210, 70%, 70%);
    --primary-dark: hsl(210, 70%, 30%);
}