Skip to content
Get packs

OKLCH Colour Palette Guide

Guides the agent to build perceptually uniform CSS colour palettes using oklch() and oklab().

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent reviews and writes CSS colour tokens using the oklch() and oklab() colour spaces, where equal lightness steps look equally bright to the eye across hues. This makes it easier to build accessible colour ramps, dark-mode palettes and consistent hover or active states. It can also suggest wide-gamut colours for capable displays using a color-gamut media query.

Great for

  • Front-end developers building a design token or theme system in CSS
  • Designers and developers migrating an existing hex or HSL palette to oklch
  • Teams that need consistent shade steps and accessible contrast across many hues

Skip it if

  • Projects that only need a couple of fixed colours and do not use a palette system (the benefit is small and the change adds complexity)
  • Older browser targets that do not support oklch() without a fallback, since the skill focuses on modern CSS and does not cover fallbacks in its main text

Try asking

  • “Convert my hsl colour tokens in theme.css to oklch and keep the lightness steps consistent”
  • “Generate a 10-step oklch colour ramp for my brand blue with accessible text contrast”
  • “Review my CSS custom properties for colour palettes that use hardcoded hex values without a systematic lightness scale”
  • “Add wide-gamut P3 colour variants to my design tokens using @media (color-gamut: p3)”
Step-by-step guide: how to use OKLCH Colour Palette GuideInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    color-oklch.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip color-oklch.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip color-oklch.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent your existing colour tokens or CSS file so it can check them against the oklch guidance rather than writing from scratch.
  • Ask for a fallback strategy if you must support browsers without oklch() support, since the skill does not detail this.
  • Verify final contrast ratios with a dedicated accessibility checker, because perceptual uniformity helps but does not guarantee WCAG compliance.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.