frontend-syntax-css-color-modern

name	frontend-syntax-css-color-modern
description	Use when choosing a color function in CSS, building a shade ladder from a brand seed, blending two colors deterministically, wiring up dark mode without media-query duplication, or shipping wide-gamut colors with a sRGB fallback. Prevents the most common modern-color regressions in 2026 : muddy `color-mix` results from mixing in sRGB, `light-dark()` silently falling back to the light value because `color-scheme` was never declared, P3 colors clipping on sRGB displays without a fallback, relative-color expressions that overflow the gamut, and `hsl()` shade ladders that look "right" in numbers but wrong on screen because HSL is not perceptually uniform. Covers `oklch(L C H / alpha)` with perceptual lightness / chroma / hue, the relative-color syntax `oklch(from <color> l c h / alpha)`, `color-mix(in <space>, c1 pct, c2 pct)` across all eleven supported color spaces and the four polar hue-interpolation methods, `light-dark(<light>, <dark>)` paired with `color-scheme: light dark`, the `color()` function for `display-p3` and `rec2020`, the `@media (color-gamut: p3)` query, and gamut-clamping with `color-mix`. Keywords: oklch, oklab, color-mix, light-dark, color-scheme, relative color, display-p3, rec2020, P3, lab, lch, hwb, color-gamut, perceptual lightness, chroma, hue interpolation, shorter hue, longer hue, colors look muddy, dark mode broken, gradient banding, color does not interpolate evenly, colors look dull, how to mix colors in CSS, what is oklch, do I still need a preprocessor, how to do light and dark theme without media queries, what is perceptually uniform color.
license	MIT
compatibility	Designed for Claude Code. Requires Frontend Design evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Frontend Syntax : CSS Modern Color

This skill is the operational reference for native CSS color functions in 2026. It covers oklch(), the relative-color syntax, color-mix(), light-dark(), wide-gamut color(), and the @media (color-gamut: p3) query. The skill does NOT cover Sass color functions, design-token methodology (see [[frontend-impl-design-tokens]]), palette generation (see [[frontend-theming-color-palette-oklch]]), or WCAG contrast calculations (see [[frontend-a11y-motion-contrast-wcag22]]).

Quick Reference

Floor rules

• ALWAYS use oklch(L C H) for systematic color decisions (palettes, shade ladders, hover states). NEVER use hsl() for the same purpose ; HSL is not perceptually uniform.
• ALWAYS mix in oklch or oklab when blending colors for gradients or shades. NEVER mix in srgb for design-system purposes ; sRGB interpolation goes through gray.
• ALWAYS declare color-scheme: light dark on :root BEFORE using light-dark(). Without it, the function falls back to the light value.
• ALWAYS provide a sRGB fallback when shipping wide-gamut color(display-p3 ...) colors. NEVER assume the display can reproduce P3.
• ALWAYS verify that a relative-color expression stays within the target gamut. NEVER ship oklch(from <color> calc(l + 30%) c h) without checking the result on a sRGB display.

Decision tree 1 : Which color function for which task ?

Need a single solid color expressed predictably ?
  -> oklch(L C H [/ alpha])
     L is perceptual lightness 0..1 (or 0%..100%)
     C is chroma 0..~0.4 (0% = neutral gray, 100% = 0.4 = vivid)
     H is hue 0..360 (degrees)
     alpha is 0..1 (or 0%..100%), optional

Need to derive a related color from a seed ?
  -> oklch(from <seed> l c h [/ alpha])
     Read seed's L, C, H components by name; modify with `calc()`.
     Example : oklch(from var(--brand) calc(l + 0.1) c h) for a lighter shade.

Need to blend two colors ?
  -> color-mix(in <space> [<hue-interp>], <c1> [pct], <c2> [pct])
     Spaces : srgb, srgb-linear, display-p3, lab, oklab, rec2020, xyz, xyz-d50,
              xyz-d65 (rectangular) ; hsl, hwb, lch, oklch (polar).
     Polar hue methods : shorter hue (default), longer hue, increasing hue,
                        decreasing hue.
     Default to `in oklch` or `in oklab` for design-system blends.

Need a per-theme value (light vs dark) ?
  -> light-dark(<light-value>, <dark-value>)
     REQUIRES color-scheme: light dark on :root (or on the relevant ancestor).
     Works for both color values and image values (e.g. backgrounds).

Need wide-gamut color (P3 / Rec2020) ?
  -> color(display-p3 R G B [/ alpha])  or  color(rec2020 R G B [/ alpha])
     R/G/B are 0..1 floats. Gate with @supports or @media (color-gamut: p3)
     and provide a sRGB fallback.