Guide · Agent skill
How to use the OKLCH Colour Palette Guide agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The color-oklch skill is a set of instructions that teaches an AI agent to write and review CSS colour tokens using the oklch() and oklab() colour spaces. It is aimed at front-end developers and designers who maintain a design token or theme system and want shade steps that look evenly spaced to the eye. After this guide you will know what the skill changes, how to install it, how to ask for it in plain language, and when it is not worth using.
OKLCH Colour Palette Guidethedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the skill as a ZIP from the page where you found this guide.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one codebase.
- 3Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- 4Describe your palette task. Ask for help in plain language, naming the CSS file, tokens or shade steps you are working on.
- 5Review the oklch output. Check that the lightness steps are consistent across hues and that contrast still works for your text and controls.
- 6Handle fallbacks. Add fallbacks for older browsers yourself, because the skill's main text does not cover them.
What the color-oklch skill makes the agent do
HSL and hex colours are defined in the sRGB colour space, which is not perceptually uniform. A 10 % change in lightness can look very different depending on the hue, which makes hand-built palettes hard to keep accessible and consistent. The skill tells the agent to use oklch(L C H) (lightness, chroma, hue) so that changing the L value gives the same perceived brightness change regardless of hue or chroma.
In practice the agent checks whether colour tokens use oklch() or a perceptually uniform space, converts hsl or hex palettes to oklch where needed, and flags hardcoded palette values that lack a systematic lightness ramp. The source says it can also suggest wide-gamut colours for capable displays using a color-gamut media query.
- Reviews and writes CSS colour tokens in oklch() or oklab()
- Keeps the lightness axis consistent across hues within the same shade step
- Helps build accessible colour ramps, dark-mode palettes and hover or active states
- Suggests wide-gamut colours via @media (color-gamut: p3)
color: oklch(0.7 0.15 240); /* A blue with 70% lightness, medium chroma */Install the color-oklch skill
Download the skill as a ZIP from the page where you found this guide. Unzip it so that the skill folder sits in one of two places: your personal skills folder at ~/.claude/skills/, or a project-level .claude/skills/ folder inside the project you are working on. Use the project folder if you want the skill only for that codebase.
If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Know what the skill contains
The skill folder has two files. SKILL.md holds the main instructions: a short quick reference, a check, a fix, an explanation guide and a code review guide. references/rule.md holds the fuller reference, including a table of the L, C and H channels and CSS examples. The agent can read the reference file when it needs more detail.
The source describes the channels this way: L runs from 0 to 1 (0 black, 1 white), C from 0 to about 0.4 or more (0 grey), and H from 0 to 360 degrees on the colour wheel.
- SKILL.md: main instructions and quick reference
- references/rule.md: full channel table and code examples
- Lightness (L): 0 to 1, perceived brightness
- Chroma (C): 0 upwards, saturation (0 is grey)
- Hue (H): 0 to 360 degrees
Trigger the skill with natural requests
You do not need a special command. Describe the task in ordinary language that matches the skill's purpose: building a design token system, creating accessible colour palettes, generating colour ramps, or moving a design system to wide-gamut displays. The agent should pick up the skill when your request fits that description.
Be specific about the file or palette you are working on. Naming the CSS file, the token names, and the shade steps you need gives the agent something concrete to review or write.
- "Turn the brand colour tokens in tokens.css into oklch and keep the lightness steps consistent."
- "Generate a 10-step blue ramp in oklch for buttons, with hover and active states one step apart."
- "Review this dark-mode palette for consistent perceived brightness across hues."
- "Add wide-gamut versions of our primary colours for displays that support P3."
What the skill needs and what it does not do
The source lists no required tools or packages. It does not run scripts and does not use the network, so the skill only supplies instructions and reference text to the agent. The skill is marked as intermediate difficulty with an estimated time of 20 minutes for the underlying task.
Because the skill focuses on modern CSS, check your browser targets before you ship. The source says it does not cover fallbacks for browsers that lack oklch() support in its main text, so you will need to handle fallbacks yourself.
- Requires: nothing listed in the source
- Runs scripts: no
- Uses network: no
- Licence: MIT
Tips for getting good results
Give the agent the full set of hues and shade steps at once. Equal lightness steps only pay off when they are applied across the whole palette, so a single colour converted in isolation tells you little.
Review the output yourself. The skill can suggest wide-gamut colours, but whether a palette needs them depends on your audience and displays. Check contrast for text and interactive states after conversion.
- Convert a whole ramp at a time, not one colour
- Keep the same L value across hues for the same shade step
- Check contrast after conversion, since the source does not give contrast thresholds
What people use it for
- Converting a hex or HSL brand palette into oklch custom properties
- Generating a consistent shade ramp for buttons, with hover and active states one step apart
- Building a dark-mode palette where equal lightness steps look evenly spaced across hues
- Adding wide-gamut colour options for displays that support P3 using @media (color-gamut: p3)
Frequently asked questions
Is the color-oklch skill free to use?
The source lists the licence as MIT. It does not mention any price, so this guide does not claim one. Check the licence file in the download for the full terms.
What does the color-oklch skill require to install?
The source lists no requirements. You download the ZIP, unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it in the Claude apps under Settings, Capabilities, Skills.
Does the skill run scripts or use the internet?
No. The source says the skill does not run scripts and does not use the network. It provides instructions and reference text to the agent.
Why use oklch instead of hsl for colour palettes?
The source says hsl and hex are not perceptually uniform, so the same lightness change can look very different across hues. In oklch, equal lightness steps look equal to the eye, which makes accessible ramps easier to build.
Will oklch colours work in older browsers?
The skill focuses on modern CSS and its main text does not cover fallbacks. If you target older browsers that lack oklch() support, you will need to add fallback values yourself.
Is there a simpler alternative if I only need a few fixed colours?
The source says the skill is not suited to projects with only a couple of fixed colours and no palette system, because the benefit is small and the change adds complexity. For those projects, keeping your existing hex or HSL values is the simpler choice.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use the color-oklch skill if you maintain a CSS design token or theme system and need consistent shade steps and accessible contrast across many hues. Skip it if your project uses only a few fixed colours or you must support older browsers without adding your own fallbacks.
Download the skill