Design Tools

Color Models Explained

Colors on the web can be expressed in several formats, each with different strengths. Understanding them helps you use the right format for each context — HEX for design handoff, RGB for opacity control, HSL for programmatic color manipulation.

Why HSL Is Better for Theming

HSL (Hue, Saturation, Lightness) maps directly to how humans perceive color. The hue is a 0–360° angle on the color wheel — changing only the hue shifts color while keeping the same tone. This makes it trivial to create color palettes: pick a hue, then vary lightness from 90% (near-white) to 10% (near-black) to get a full shade scale. Tailwind CSS's color system is built on this principle.

Building a Color System

A color system defines a small, intentional set of colors that work together. It prevents the "50 shades of grey" problem where developers pick slightly different colors each time and the UI looks inconsistent. A minimal system needs a primary, a neutral scale, a success, a warning, and a destructive color.

CSS Custom Properties Color Scale

:root {
  /* Primary — generated with HSL at fixed hue */
  --color-primary-50:  hsl(0, 84%, 97%);
  --color-primary-100: hsl(0, 84%, 92%);
  --color-primary-500: hsl(0, 84%, 60%);  /* brand red */
  --color-primary-700: hsl(0, 84%, 40%);
  --color-primary-900: hsl(0, 84%, 20%);

  /* Semantic aliases */
  --color-action:      var(--color-primary-500);
  --color-action-hover:var(--color-primary-700);
  --color-danger:      var(--color-primary-500);
}

All Design Tools