oklch-skill: Teaching AI to Generate Perceptually Uniform Color Palettes

You ever asked an AI assistant to “generate a color palette” and gotten back five hex codes that look fine on their own but completely fall apart when you put them next to each other? One color is too dark, another shifts hue when you build a hover state, and the dark mode variant looks like a different brand.

That’s the core problem oklch-skill solves. It’s an Agent Skill for Claude Code, written by Jakub Krehel, that teaches AI assistants to think about color in OKLCH — a perceptually uniform color space — instead of HSL or raw RGB. The result is AI color output you can actually ship.

If you care about AI-generated palettes that hold up in real design systems, this is one of the most useful tools to land in the AI tooling space lately.

Why OKLCH matters for AI color generation

Most AI color tools — and most CSS — still default to HSL. HSL is intuitive for humans (hue, saturation, lightness, easy) but it’s mathematically arbitrary. Two colors with the same L value in HSL can look wildly different in actual perceived brightness. That’s why HSL palettes drift: scale a brand color down to a lighter tint and the hue shifts on you.

OKLCH fixes this. It’s based on the Oklab perceptual color model:

• L — perceptual lightness (this is the part that actually matches what your eyes see)
• C — chroma (color intensity, independent of lightness)
• H — hue angle

When an AI generates colors in OKLCH, scaling lightness up or down doesn’t bend the hue. Two colors with L = 0.6 are genuinely equally bright. That’s the foundation everything else builds on.

The catch: OKLCH is harder to reason about by hand than HSL. You can’t eyeball oklch(0.62 0.18 254) and know what color you’re getting. But that’s exactly why pairing it with AI works — the model handles the math, you handle the intent.

What oklch-skill actually teaches the AI

The skill is essentially a structured knowledge module that gets installed into Claude Code. Once it’s there, Claude knows how to:

1. Convert between formats correctly

Hex, RGB, and HSL all flow into OKLCH cleanly. Going the other way — OKLCH back to sRGB — is where most tools cut corners and clip out-of-gamut colors badly. The skill teaches Claude to handle gamut mapping properly, including Display P3 fallbacks for wide-gamut screens.

2. Generate perceptually uniform palette scales (50–950)

This is the big one for AI color work. When you ask for a “violet scale from 50 to 950,” the skill produces stops where the visual jump from 500 to 600 feels the same as 200 to 300. Tailwind v4 ships its default palette in OKLCH for exactly this reason — and the skill knows how to slot into Tailwind v4 theme tokens directly.

3. Derive dark mode variants automatically

Dark mode is where AI color generation usually breaks. The skill applies lightness inversion with hue and chroma preservation — so your bg-violet-600 button stays recognizably violet in dark mode instead of becoming a muddy gray-purple. No manual tweaking.

4. Run real accessibility checks

WCAG 2 contrast ratios are the legal floor, but they’re famously unreliable for dark backgrounds. The skill knows about APCA — the modern contrast model coming in WCAG 3 — and can validate text/background pairs against both. So when AI suggests a color, it can also tell you whether you’re allowed to put white text on it.

5. Detect hue drift in existing palettes

Got a legacy HSL palette that “feels off”? Run the skill against it. It’ll flag where your 100 and 900 are at meaningfully different hues, which is usually the cause of that “this doesn’t quite feel like one brand” sensation.

Why this matters for AI color tools

Here’s the thing nobody talks about: the bottleneck for AI color generation isn’t the language model. GPT-class models can spit out hex codes all day. The bottleneck is color science — knowing whether the codes coming out are actually any good.

Most AI palette generators today are essentially LLMs guessing at hex values based on training data. That works for vibes (“a sunset palette,” “a calming forest palette”) but falls apart the moment you need:

• A consistent 50–950 scale
• Accessible text/background pairs
• A dark mode that looks like the same product
• Hover/active state derivatives that don’t shift hue

oklch-skill bridges the gap. It gives the AI a structured way to reason about color, not just retrieve plausible-looking hex codes. That’s the difference between AI that generates colors and AI that generates color systems.

Installation and use

It’s a one-liner:

npx skills add jakubkrehel/oklch-skill

Once installed, Claude automatically applies OKLCH thinking to color tasks. You can also invoke it explicitly with /oklch-skill when you want to make sure Claude is using the perceptual model.

It works particularly well with:

• Tailwind v4 — which already uses OKLCH for its default palette
• Design tokens — generate --color-primary-500 style variables in OKLCH directly
• Theme switching — light/dark/high-contrast variants from a single source

Where it fits with AIColors

We built AIColors around the same idea — that AI color generation is most useful when it’s grounded in real color science, not just pattern matching. oklch-skill is the developer-tooling counterpart: where AIColors helps you discover palettes by mood and theme, oklch-skill helps your AI coding assistant turn those palettes into shippable design tokens, scales, and accessible UI.

Both point at the same future: AI that doesn’t just suggest colors, but understands them.

A few honest caveats

It’s not magic. A few things to know:

• It’s a Claude Code skill specifically — if you’re using a different AI assistant, you’ll need an equivalent. The principles transfer; the tooling doesn’t.
• OKLCH browser support is excellent now (every major browser since 2023), but if you’re targeting very old environments you’ll still need fallbacks. The skill handles this, but it’s worth knowing.
• “Perceptually uniform” isn’t perfectly uniform. OKLCH is dramatically better than HSL, but human color perception is messy and no model is exact.

None of these are dealbreakers. They’re just the kind of detail you only learn after using a tool seriously.

The bigger picture

The real value of oklch-skill isn’t that it makes AI better at color — it’s that it makes AI accountable to a model of color that designers and accessibility folks already trust. When the AI generates a palette in OKLCH, you can verify it. You can scale it. You can throw it into Figma or Tailwind without manual cleanup.

That’s the bar AI color tools should be reaching for. Not “look, it generated something pretty,” but “here’s a system you can build on.”

If you’re working on design systems with AI in the loop, install oklch-skill and try it for an afternoon. And if you want to start with palette ideas grounded in mood and aesthetic — try the AI color generator on the homepage. They’re complementary tools for the same problem.

References

1. oklch-skill on GitHub — Jakub Krehel
2. oklch.fyi — The educational site the skill is based on
3. Oklab: A perceptual color space for image processing — Björn Ottosson
4. Tailwind CSS v4 OKLCH palette
5. APCA contrast — Readability research