Convert, generate, and validate OKLCH color palettes for web projects.
npx skills add https://github.com/xzedm/clipplic-landing --skill better-colors-xzedm
Please help me install this Agent Skill. Skill: better-colors Source: https://github.com/xzedm/clipplic-landing/tree/main/.agents/skills/better-colors Command: npx skills add https://github.com/xzedm/clipplic-landing --skill better-colors-xzedm
@theme color scales in oklch and define semantic tokens with one meaning per color. - Use Case: When migrating a Tailwind v4 theme from hex to oklch, use this Skill to convert each token, verify every foreground/background pair in both light and dark appearances, and clamp any chroma values that exceed the sRGB gamut. ## Quick Start Convert the hex colors in my Tailwind theme to oklch and check the contrast of every text and background pair in both light and dark mode.High-intent search queries and answers about installing and using this skill.
Convert hex to oklch by mapping the color into the OKLCH space and writing it as oklch(L C H), with three decimal places for lightness and chroma. Tools like oklch.fyi let you explore conversions interactively before committing values to your stylesheet.
Build the palette in OKLCH by holding the hue angle constant across all lightness steps instead of using HSL lightness ramps. A hue spread greater than 10 degrees across steps indicates visible drift that needs correction.
Yes, Tailwind v4 supports oklch values directly in @theme blocks, and converting hex tokens to oklch is the recommended approach. Define your scales as oklch values so lightness steps remain perceptually uniform.
High-chroma oklch values can fall outside the sRGB gamut and clip on standard displays. Clamp chroma to the maximum for the given lightness and hue, and wrap Display P3 colors in a @media (color-gamut: p3) query with an sRGB fallback.
For APCA, body text needs an absolute Lc of at least 75 with 90 preferred, and non-body text needs at least 60. For WCAG 2, normal text requires 4.5:1 for AA and 7:1 for AAA; adjust lightness first when fixing failures.
Do not convert when the project already has a consistent hex or RGB token system and the task is an isolated fix. Introducing a second color notation for one change creates inconsistency; reserve OKLCH migration for dedicated color-system work.
Dragoon0xGenerate color token files from detected codebase palettes in CSS, Tailwind, or JavaScript formats.
tenequmApply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.
AshesOfTheUndeadGenerate dashboard layout configurations using modular grid and design tokens.
AO-HySGenerates, names, and audits CSS color systems including ramps, tokens, and contrast checks.