OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
better-colors is a guidance skill for working with the OKLCH color space in web projects. It addresses a common class of CSS problems, broken palette ramps, failing contrast, and hue drift, that stem from using perceptually non-uniform color models like HSL. By treating OKLCH as the working color space, where lightness, chroma, and hue behave predictably, the skill helps developers convert existing colors and reason about color the way it is actually perceived.
The skill is organized around a SKILL.md overview plus four reference files. It covers converting hex, rgb, and hsl values into oklch(); generating numeric design-system palette scales (50 to 950) with per-step chroma clamping to stay in gamut; multi-hue palettes that keep equal perceived brightness and vividness; and dark-mode derivation by reversing the lightness mapping. It also documents accessibility checks using both APCA (Lc thresholds) and WCAG 2 ratios, teaching that contrast is fixed by adjusting lightness alone, plus P3 display gamut fallbacks and Tailwind v4 @theme integration. It prescribes a before/after markdown table format for presenting color changes.
It is aimed at frontend developers, design-system authors, and UI engineers who want consistent, accessible palettes and are adopting modern CSS color syntax. Typical uses include migrating a codebase from hex/HSL to OKLCH, building or auditing a Tailwind theme, fixing contrast failures, and detecting hue drift in an existing ramp.
It documents converting 3/6/8-digit hex, rgb()/rgba(), and hsl()/hsla() values into oklch(), while leaving surrounding CSS such as gradient interpolation unchanged.
Both. APCA (Lc thresholds) is recommended as the perceptually accurate default, while WCAG 2 ratios are covered for formal conformance claims. The core advice is to fix contrast by adjusting the lightness (L) channel only.
The skill notes oklch() is Baseline 2023 with 96%+ global coverage, and recommends an @media (color-gamut: p3) wrapper with an sRGB fallback for wide-gamut colors.
From a base color it clamps lightness to [0.05, 0.95], distributes L evenly across the 50 to 950 steps, and clamps chroma per step to that step's maximum for the hue and color space so every swatch stays in gamut.
Yes. It covers converting hex values in Tailwind v4 @theme scales to oklch and handling P3 gamut clamping, detailed in its gamut-and-tailwind reference file.
Quick Setup:
.claude/skills/Repository
jakubkrehel/skills