What problem does it solve? CSS colors written in hex, rgb, or hsl produce broken palettes, hue drift across lightness steps, and failing contrast because those color spaces do not match human perception. This Skill applies the OKLCH perceptual color space so palette generation, contrast fixes, and gamut handling behave predictably. ## Core Features & Use Cases - Color Conversion: Convert hex, rgb(), rgba(), hsl(), and hsla() values to oklch() while leaving gradients, keywords, and formatting untouched. - Palette Generation: Build 50–950 numeric scales with clamped lightness bounds, per-step chroma clamping to gamut, multi-hue palettes using equal chroma percentage, and dark mode derivation by reversing lightness mapping. - Contrast & Accessibility: Check foreground/background pairs against APCA Lc thresholds and WCAG 2 ratios, then fix failures by adjusting only the oklch lightness channel. - Gamut & Tailwind v4: Clamp out-of-gamut chroma, add @media (color-gamut: p3) fallbacks, and define custom @theme color scales in oklch. - Use Case: Migrating a design system to Tailwind v4? Convert every hex token in @theme to oklch, rebuild hue-drifting HSL ramps with constant hue, and verify body text reaches Lc 75 against its background. ## Quick Start Convert the hex colors in my stylesheet to oklch and check whether the text colors pass APCA contrast on their backgrounds.
