color-systemlisted

# Color System Build a palette whose roles survive real text, controls, themes, and gamut limits. OKLCH makes lightness and chroma easier to reason about than HSL or hex, but it does not choose the art direction or guarantee contrast. The rendered pair remains the test. ## Why OKLCH `oklch(L C H)`: **L** 0–1 perceptual lightness, **C** chroma (0 = gray, ~0.37 max real), **H** 0–360 hue. Benefits that matter: - Similar L values are a useful starting point for visually even ramps; hue and chroma still affect the result, so inspect and measure it. - Adjust one property without wrecking the others (lighten without desaturating). - Wide-gamut (P3) ready; degrades to sRGB. Supported in all current evergreen browsers; for very old targets provide a hex fallback (build tools can emit both). ## The method 1. **Choose a palette structure from evidence.** A restrained product may need one hue and neutrals; a data or editorial system may need several. Record what each hue does. 2. **Build a lightness ramp** at fixed steps. A 10–12 stop ramp from ~0.97 (50) down to ~0.30 (900). Keep H constant; vary L; let C peak in the mid-tones and taper at the extremes (very light and very dark can't hold high chroma). 3. **Choose neutral temperature deliberately.** Low-chroma brand tinting can create cohesion; true neutrals can be better for data, photography, or strict status colors. 4. **Pick semantic colors** (success/error/warning/info) at matched L/C so they belong to the