SkillFoxx

oklch-skill

A skill for the OKLCH color space: hex, rgb and hsl conversion, 9-step palettes, APCA and WCAG contrast, P3 and Tailwind v4.

  • 283 ★ on the repository
  • Last commit
  • MIT
Skill

Minimal access

Why this level

  • The skill consists of text instructions; the agent changes only style files in your project.
All reasons and checks

jakubkrehel/oklch-skillAuthor:Jakub Krehel

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/oklch-skill

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

  • The skill consists of text instructions; the agent changes only style files in your project.

This is third-party code. Review the repository files before installing.

What it does

The `oklch-skill` skill converts colors from hex, rgb and hsl into `oklch(L C H)`, builds shade scales, checks contrast and watches gamut boundaries. The main file holds a quick reference and thresholds: lightness L above 0.6 counts as a light background, a hue spread over 10 degrees across palette steps counts as drift, normal text passes APCA at Lc 60 or more and WCAG 2 at a 4.5 to 1 ratio. Four reference files cover format conversion, palette generation, accessibility and contrast, sRGB and Display P3 gamuts together with Tailwind v4 themes. In a review the skill outputs changes as a table with "Before" and "After" columns where every replaced row stands alone. The default palette has nine steps from 50 to 950, as in Tailwind.

Who it is for. Frontend developers and interface designers moving design tokens to OKLCH who want colors checked without hand calculation.

Good fit when

  • CSS has piled up hex and hsl colors and they are converted to `oklch()` across the theme.
  • A shade palette is built from one brand color and the blue drifts toward purple on light steps.
  • Text on a background fails the contrast check and lightness is tuned without touching the hue.
  • A Tailwind v4 theme in `@theme` moves to OKLCH with an sRGB fallback added.
  • A dark theme is derived from the light one by mirroring lightness.

Not a fit when

  • A brand color and color harmony have to be chosen: the skill works with values already picked.
  • The project targets browsers without `oklch()` support and does not generate fallbacks.
  • The work involves print and CMYK color profiles where OKLCH does not apply.

Example request

Convert the colors in `tokens.css` to OKLCH, generate nine steps from the brand blue and check text contrast with APCA.

Limitations

The skill consists of text rules and the agent does the math: the repository has no ready conversion script, so numbers are worth checking against a calculator. The skill notes browser support as Baseline since 2023 with over 96 percent coverage, yet an sRGB fallback still needs its own CSS line. Contrast standards use different thresholds: APCA and WCAG 2 can give different answers for one color pair. For interactive picking the author points to the `oklch.fyi` site. The last commit is from October 2026.

How to disable. Delete the `oklch-skill` directory from the agent's skills directory, for example `.claude/skills/`. Colors already converted to OKLCH stay in the project.

FAQ

How do I install oklch-skill in Claude Code?

Run `npx skills add jakubkrehel/oklch-skill` in the project directory. The skill loads when a request mentions OKLCH, palettes, contrast or color conversion.

What tasks does the skill solve?

Converting hex, rgb and hsl to OKLCH, generating palettes, checking contrast with APCA and WCAG, clamping a color to the gamut boundary, sRGB fallbacks and Tailwind v4 themes.

Why is OKLCH better than HSL for palettes?

Equal lightness steps in OKLCH look equally light and the hue does not drift along the scale: in HSL blue slides toward purple. Contrast is fixed by changing lightness alone, since chroma barely affects it.

What should be done with colors outside sRGB?

Lower the chroma while keeping lightness and hue. For wide-gamut displays add a variant inside `@media (color-gamut: p3)` and keep a fallback for the rest.

How does the skill format a color review?

As a table with "Before" and "After" columns. Every changed color goes in, so any row can be accepted or rejected on its own.

Discussion

No questions or reviews yet.

Skills

Color Expert

color-expert

A color science skill: OKLCH, APCA and WCAG contrast, design system ramps, palette generation, pigment mixing and color history

SkillMinimal access65617

Swiss Design Skill

swiss-design-skill

A skill that gives the agent a Swiss style on Tailwind: 12-column grid, IBM Plex Sans, a single accent and generous whitespace.

SkillMinimal access163

A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.

SkillMinimal access95

27 oxlint rules for Tailwind CSS v4 plus a skill and a Claude Code plugin: class typos, conflicts and deprecated utilities.

PluginMinimal access108

A Claude Code skill collection for copywriting, advertising, SEO and interface design: Ogilvy, editing, rules and CSS techniques.

SkillMinimal access469

A skill gives an agent modern CSS techniques: one declaration instead of piles of breakpoints, and a CSS feature before a script.

SkillMinimal access403

README in short

The README is short: the purpose, a link to the skills.sh catalog and one install command. Details live in the main skill file and four reference files.

README badge

Original SKILL.md

---
name: oklch-skill
description: 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.
---

# OKLCH Colors

OKLCH 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](https://oklch.fyi).

## Quick Reference

| Category | When to use | Reference |
| --- | --- | --- |
| Conversion | Hex/rgb/hsl to oklch | [color-conversion.md](color-conversion.md) |
| Palettes | Generate scales, multi-hue, dark mode | [palette-generation.md](palette-generation.md) |
| Contrast | APCA/WCAG checks, fixing failing contrast | [accessibility-contrast.md](accessibility-contrast.md) |
| Gamut & Tailwind | P3 fallbacks, `@theme` scales, gamut clamping | [gamut-and-tailwind.md](gamut-and-tailwind.md) |

## Why OKLCH

- **Perceptual uniformity.** Equal L steps = equal brightness. `oklch(0.5 ...)` is visually mid. HSL's `lightness: 50%` varies wildly by hue.
- **Stable hue.** HSL blue shifts toward purple as lightness changes. OKLCH hue stays constant across the full lightness range.
- **Independent chroma.** Chroma is an absolute measure of colorfulness that doesn't depend on lightness. HSL saturation does.
- **Finite gamut.** Not every oklch value maps to a displayable sRGB color. High-chroma values at certain hues will clip — gamut awareness is required.

## OKLCH Syntax

```
oklch(L C H)
oklch(L C H / alpha)
```

| Channel | Range | Description |
| --- | --- | --- |
| L (Lightness) | 0–1 | 0 = black, 1 = white. Perceptually uniform. |
| C (Chroma) | 0–~0.4 | Colorfulness. 0 = gray. Max depends on L and H. |
| H (Hue) | 0–360 | Hue angle in degrees. |
| alpha | 0–1 | Optional transparency. Slash syntax. |

```css
oklch(0.637 0.237 25.331)
oklch(0.8 0.05 200 / 0.5)
```

**Formatting:** L and C use 3 decimal places, H uses up to 3. Drop trailing zeros. Format `-0` as `0`. Browser support: Baseline 2023, 96%+ global coverage.

## Key Thresholds

| Rule | Value |
| --- | --- |

Report a problem