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 ?