CSS — Colors

Setting colors in CSS

Two fundamental properties:

h1 {
    color: darkgreen;                 /* text color */
    background-color: lightgray;      /* box behind the element */
}

What the browser displays

(Dark green heading text on a light gray band stretching across the page.)

Four ways to write a color

All four below produce the same orange:

.box { background-color: tomato; }                /* name */
.box { background-color: #ff6347; }               /* hex   */
.box { background-color: rgb(255, 99, 71); }      /* rgb   */
.box { background-color: hsl(9, 100%, 64%); }     /* hsl   */

Names

140+ built-ins (tomato, dodgerblue, mediumseagreen…). Great for learning; imprecise for design work.

HEX — #rrggbb

Six hex digits, two per channel: red, green, blue (00–ff). The industry standard — every design tool speaks it.

a { color: #1a73e8; }        /* Google-link blue */
p { color: #333; }           /* shorthand for #333333 */

RGB — rgb(r, g, b)

Each channel 0–255 of colored light:

rgb(255, 0, 0)      /* pure red    */
rgb(0, 0, 0)        /* black       */
rgb(255, 255, 255)  /* white       */
rgb(128, 128, 128)  /* mid gray    */

HSL — hue, saturation, lightness

The human-friendly one:

hsl(120, 100%, 50%)   /* vivid green        */
hsl(120, 100%, 25%)   /* same hue, darker   */
hsl(120, 30%, 50%)    /* same hue, muted    */

Hue = position on the color wheel (0–360°), saturation = intensity, lightness = black↔white. Build whole palettes by holding hue and sliding lightness.

Transparency

rgba() / hsla() — alpha channel

.overlay {
    background-color: rgba(0, 0, 0, 0.5);   /* 50% transparent black */
}

Alpha runs 0.0 (invisible) → 1.0 (solid). Modal backdrops, ghost buttons, subtle tints — all rgba.

opacity property

.faded {
    opacity: 0.4;    /* the WHOLE element fades, text included */
}

Know the difference:

rgba() background → only the color is see-through
opacity          → everything inside fades too

A practical palette in action

<style>
    body      { background: #fafafa; color: #222; }
    header    { background: hsl(200, 70%, 30%); color: white; }
    .card     { background: white; border: 1px solid #ddd; }
    .badge    { background: rgba(220, 38, 38, 0.15); color: #b91c1c; }
</style>

One neutral page tone, one brand hue with white text, cards lifted off the background, soft red badges via alpha. That's how most professional sites assemble color.

Contrast — non-negotiable

Text must be readable against its background:

/* FAIL: yellow on white */
.bad { color: #ffff00; background: white; }

/* PASS: strong difference */
.good { color: #222; background: white; }

Aim for 4.5:1 contrast on body text (WCAG AA). Free online contrast checkers grade any pair instantly. Also never use color as the only signal — pair red error text with an icon or label.

Mini Practice

1. Recreate your favorite app's look using only two hues + grays
2. Write the same green four ways: name, hex, rgb, hsl
3. Make a modal backdrop: full-screen div at rgba(0,0,0,.5)
4. Build five shades of blue by varying only HSL lightness
5. Run any two of your pairs through a contrast checker

Next: backgrounds →