/oklch-skill
An agent skill that helps you convert your project to use OKLCH colors, generate new palettes, check contrast, handle gamut boundaries and more.
It is available for Claude Code, Codex, Cursor Agent and many more. After installation, run /oklch-skill to get started.
jakub@jakub's-macbook-pro.local~
→ oklch.fyi git:(main) ✗ claude
Claude Code v2.1.162Opus 4.8 (1M context) · Claude Max~/Developer/oklch.fyi
>/oklch-skill
/oklch-skillOKLCH is a perceptually uniform color space where the numbers actually mean what you think they mean. Most color problems in CSS — broken palettes, failing contrast, hue drift — come from using color spaces that don't match how we see. OKLCH fixes the model so the tools work. To explore interactively, visit oklch.fyi.
You can pick from multiple actions including converting colors, generating palettes, checking contrast, gamut clamping, setting up fallbacks and more.
oklch
oklch
oklch
oklch
hsl
hsl
hsl
hsl
oklch(0.50 0.16 30)oklch(0.50 0.16 150)oklch(0.50 0.16 250)oklch(0.50 0.16 320)
hsl(30 100% 50%)hsl(150 100% 50%)hsl(250 100% 50%)hsl(320 100% 50%)
Lightness50%
After the skill runs you'll get a comprehensive summary of the changes made. You can ask any follow up questions about OKLCH and the agent will help answer them.
Read more