A practical deep-dive into using oklch for design token systems. Covers why HSL's non-perceptual lightness causes inconsistencies across hues in multi-brand themes, and how oklch's perceptually uniform lightness solves this. Includes building mathematically consistent color scales, handling chroma and gamut clipping for sRGB vs P3 displays, using color-mix() in oklch for runtime palette generation, animating oklch values with @property, a full semantic token architecture with dark mode, browser support notes, and a migration strategy from existing HSL-based systems.
Table of contents
What oklch actually isThe multi-brand problem, solvedBuilding a color scale in oklchChroma and gamut clippingWide gamut: using P3 intentionallycolor-mix() in oklch@property and animating oklchSemantic token architectureBrowser supportMigrating an existing system19 Impressions