How screens make color
A screen mixes light, not paint. Every pixel blends three lights — red, green, blue (RGB). All three off is black; all three full is white. That's the opposite of paint, where mixing everything gives a muddy dark.
The CSS color formats
| Format | Example | Best for |
|---|---|---|
| Named | tomato | Quick tests. ~140 keywords, limited. |
| Hex | #2997ff | The everyday default; what pickers give you. |
| rgb() | rgb(41 151 255) | When you're thinking in red/green/blue, or need alpha. |
| hsl() | hsl(212 100% 58%) | Tweaking by hand — nudge lightness for hover states. |
| oklch() | oklch(70% .15 250) | Modern, perceptually even palettes (newer browsers). |
#2997ff, rgb(41 151 255), and hsl(212 100% 58%) are the exact same blue — pick the format that's easiest to reason about for the job.Hex codes, decoded
A hex color is #RRGGBB — three pairs giving the amount of red, green, blue. Each pair runs 00 (none) to ff (full), which is 0–255 in everyday numbers.
#2997ff = a little red, medium green, full blue → a bright sky blue.
#fff is shorthand for #ffffff (white) and #000 for black — when each pair is doubled, you can write it once.HSL: the format you can think in
HSL describes color the way people do: Hue (which color, 0–360° around the wheel), Saturation (how vivid, 0–100%), Lightness (how bright, 0–100%). Drag the sliders:
Building a usable palette
A site doesn't need 20 colors. A solid starter palette is one brand color, a neutral ramp (your grays), and one accent for calls-to-action.
Color schemes from the wheel
Harmonious palettes come from fixed relationships on the color wheel. Pick one hue, then derive the rest:
Opposite hues. High contrast, energetic.
Neighbors. Calm, cohesive.
Three evenly spaced. Vivid, balanced.
One hue, varied lightness. Elegant.
Contrast & accessibility
Color choices decide whether people can read your text. WCAG sets a minimum contrast ratio of 4.5:1 for normal text (3:1 for large text). Compare:
Check any pair with a contrast tool (WebAIM, or the Color Lab's resources) before shipping.
Gradients
A gradient blends two or more colors. linear-gradient() goes in a direction; radial-gradient() spreads from a point. They're values, so they go anywhere a color does — usually background.
.hero { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
background-clip: text; -webkit-text-fill-color: transparent;Transparency & alpha
Add an alpha channel to make a color see-through — great for overlays, tints, and soft shadows. 0 is invisible, 1 is solid.
background: rgb(236 72 153 / .3); modern syntax background: rgba(236, 72, 153, .3); classic, still fine background: #ec489933; hex with alpha (last 2 digits)
rgba(255,255,255,.08) — the soft card outlines throughout this site are exactly that.Color checklist
- A small, defined palette: brand, neutrals, one accent
- Text meets 4.5:1 contrast against its background
- Meaning is never carried by color alone (add icon/label)
- Hover/active states made by nudging
hsl()lightness - Accent used sparingly — roughly the 60-30-10 split
- Colors stored once as variables, not retyped everywhere