Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Use when building a design token system, creating accessible colour palettes, generating colour ramps programmatically, or migrating a design system to support wide-gamut displays.
.claude/skills/thedaviddias-color-oklch/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-07 | ✗→✓ | ▲ Improved | -1% | 0% |
| case-22 | ✓→✓ | ＝ Same ✓ | 9% | 0% |
| case-05 | ✓→✓ | ＝ Same ✓ | 0% | 0% |
| case-21 | ✓→✓ | ＝ Same ✓ | 10% | 0% |
| case-01 | ✓→✓ | ＝ Same ✓ | 22% | 0% |
HSL and hex colours are defined in the sRGB colour space, which is not perceptually uniform — a 10 % lightness change looks dramatically different depending on the hue. This makes creating accessible, harmonious palettes by hand extremely difficult. oklch corrects this: adjusting the L channel produces the same perceived brightness change regardless of hue or chroma, making it far easier to build accessible colour ramps, dark-mode palettes, and consistent hover/active states.
Check whether the CSS colour tokens use oklch() or a perceptually uniform colour space, or whether they use hsl/hex which may produce inconsistent perceived lightness across hues.
Convert the colour token palette from hsl/hex to oklch, ensuring the lightness (L) axis is consistent across all hues in the same shade step.
Explain what perceptual uniformity means in colour spaces, why oklch is better than hsl for design systems, and how the L, C, H channels map to human colour perception.
Review CSS custom properties for colour tokens. Flag palette definitions in hsl or hex that use hardcoded values without a systematic lightness ramp, especially if they are intended to be interchangeable shade steps.
For full implementation details, code examples, and framework-specific guidance, see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/css/color-oklch
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-22 | pass→pass | 13,101 | 11,619 | -11% | 1 | 1 | 0% | 2,342 | 2,556 | +9% | 0 | 0 | — |
case-05 | pass→pass | 11,449 | 9,731 | -15% | 1 | 1 | 0% | 2,103 | 2,093 | -0% | 0 | 0 | — |
case-21 | pass→pass | 14,909 | 12,618 | -15% | 1 | 1 | 0% | 2,631 | 2,884 | +10% | 0 | 0 | — |
case-01 | pass→pass | 8,661 | 7,022 | -19% | 1 | 1 | 0% | 1,484 | 1,813 | +22% | 0 | 0 | — |
case-02 | pass→pass | 68,567 | 2,838 | -96% | 1 | 1 | 0% | 1,197 | 925 | -23% | 0 | 0 | — |
case-03 | pass→pass | 4,168 | 2,571 | -38% | 1 | 1 | 0% | 788 | 793 | +1% | 0 | 0 | — |
case-04 | pass→pass | 8,299 | 6,630 | -20% | 1 | 1 | 0% | 1,699 | 1,767 | +4% | 0 | 0 | — |
case-06 | pass→pass | 8,424 | 7,026 | -17% | 1 | 1 | 0% | 1,552 | 1,807 | +16% | 0 | 0 | — |
case-07 | fail→pass | 10,143 | 7,936 | -22% | 1 | 1 | 0% | 1,982 | 1,964 | -1% | 0 | 0 | — |
case-08 | pass→pass | 10,391 | 7,658 | -26% | 1 | 1 | 0% | 1,869 | 1,920 | +3% | 0 | 0 | — |
case-09 | pass→pass | 13,497 | 13,044 | -3% | 1 | 1 | 0% | 3,115 | 3,299 | +6% | 0 | 0 | — |
case-10 | pass→pass | 2,860 | 3,741 | +31% | 1 | 1 | 0% | 487 | 1,168 | +140% | 0 | 0 | — |
case-11 | pass→pass | 7,461 | 5,866 | -21% | 1 | 1 | 0% | 1,366 | 1,483 | +9% | 0 | 0 | — |
case-12 | pass→pass | 6,822 | 3,806 | -44% | 1 | 1 | 0% | 1,199 | 1,032 | -14% | 0 | 0 | — |
case-13 | pass→pass | 17,205 | 9,567 | -44% | 1 | 1 | 0% | 2,994 | 2,270 | -24% | 0 | 0 | — |
case-14 | pass→pass | 17,382 | 11,249 | -35% | 1 | 1 | 0% | 3,185 | 2,604 | -18% | 0 | 0 | — |
case-15 | pass→pass | 13,503 | 11,291 | -16% | 1 | 1 | 0% | 2,623 | 2,568 | -2% | 0 | 0 | — |
case-16 | pass→pass | 8,787 | 3,953 | -55% | 1 | 1 | 0% | 1,505 | 1,153 | -23% | 0 | 0 | — |
case-17 | pass→pass | 14,529 | 12,188 | -16% | 1 | 1 | 0% | 2,577 | 2,561 | -1% | 0 | 0 | — |
case-18 | pass→pass | 8,788 | 7,114 | -19% | 1 | 1 | 0% | 1,566 | 1,799 | +15% | 0 | 0 | — |
case-19 | pass→pass | 72,394 | 7,090 | -90% | 1 | 1 | 0% | 1,973 | 1,566 | -21% | 0 | 0 | — |
case-20 | pass→pass | 12,281 | 7,911 | -36% | 1 | 1 | 0% | 2,275 | 1,631 | -28% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +5 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.