What problem does it solve? CSS colors written in hex, rgb, or hsl produce broken palettes, failing contrast, and hue drift because those color spaces do not match human perception. This Skill converts colors to the perceptually uniform oklch space and provides rules for palettes, contrast, and gamut handling. ## Core Features & Use Cases - Color Conversion: Convert hex, rgb(), rgba(), hsl(), and hsla() values to oklch() syntax, including bulk file conversion while preserving gradients and CSS keywords. - Palette Generation: Generate 50–950 numeric color scales with clamped lightness bounds and per-step chroma clamping, plus multi-hue palettes and dark mode derivation. - Contrast & Accessibility: Check foreground/background pairs against APCA and WCAG 2 thresholds and fix failures by adjusting only the oklch lightness channel. - Gamut & Tailwind v4: Clamp out-of-gamut chroma for sRGB, add Display P3 fallback patterns with @media (color-gamut: p3), and define custom @theme color scales for Tailwind v4. - Use Case: When migrating a stylesheet to Tailwind v4, convert every hex token in @theme to oklch, verify text contrast against APCA thresholds, and add P3 enhancements for wide-gamut displays. ## Quick Start Convert the hex colors in my stylesheet to oklch and check that the text colors pass APCA contrast against their backgrounds.
