better-colors Skill for Claude: What It Does and How to Install It

Makes Claude build color palettes, name design tokens and measure contrast instead of guessing.

Installs: 35.3K; on skills.sh
Stars: 10K; on GitHub
Files: 7; besides SKILL.md
Updated: Oct 2026; last repo commit

better-colors makes Claude treat color as a system of ramps and roles. It generates ramps, maps each step to a job, names primitive and semantic tokens, converts between formats and measures the contrast of rendered pairs.

Its rule is never to report a contrast value it did not measure. When a pair fails, it reports the pair, the measured value and the threshold, and leaves the colors alone unless you ask. It bundles six reference guides and no scripts.

Good for

Designers and engineers building a color palette or theme
Front-end teams cleaning up tokens and hard-coded colors
Anyone auditing light and dark mode contrast

Install better-colors

Claude Code

Copy this prompt.

Install the better-colors skill in Claude Code. Run this command:

npx skills add https://github.com/jakubkrehel/skills --skill better-colors

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Builds and checks color systems by generating palettes, naming semantic tokens, converting between formats and measuring contrast.

Sections in SKILL.md

Match the project's color system
A system is ramps, not colors
Every step has a job
Name primitives by hue, semantics by role
Use a token only in its role
Hold the hue across the ramp
One color, one meaning
Fill exactly one action per view
Measure the rendered pair, then report
Pick a gradient's interpolation space
Before you finish
Reporting

Key facts

Author: jakubkrehel (the repo owner)
Repository: jakubkrehel/skills
Installs on skills.sh: 35,318 as of 2026-11-02
GitHub stars: 10,003 for the whole jakubkrehel/skills repo, 2026-11-02
License: MIT
Last commit to the repo: 2026-10-25
What is inside: 8 files including SKILL.md: agents/openai.yaml and 6 reference guides (color-formats, color-usage, contrast, palette-generation, palette-structure, token-naming)
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Reuse tokens and notation; oklch for new systems
A consistent hex system beats hex with a stray oklch value. For new systems, oklch is the default.
Read · Match the project's color system
One neutral, one accent, only the status ramps you render
Every ramp step needs a role: page background, hover, border, solid fill or body text. Claude does not generate steps nothing uses.
Write · Ramps, not colors
Name primitives by hue, semantics by role
Components use only semantic tokens such as --color-text-secondary, which point at primitives such as --blue-600.
Write · Primitives and semantic tokens
Same purpose across the interface; fill one action per view
Colors within 15 degrees of OKLCH hue count as the same color. Color alone never carries meaning.
Read · One color, one meaning
Contrast against the background it really renders on
Claude reports pair, measured value and threshold, and does not change colors unless asked, then remeasures.
Read · Measure the rendered pair
Default in oklab; oklch when a two-hue gradient goes gray
The space is a look, not a correctness setting.
Write · Gradient interpolation space
17 patterns paired with the fix
Examples: a hex literal where a token exists, white text on a Tailwind 500 fill, and chroma beyond sRGB with no sRGB fallback.
Read · Before you finish table
HIGH, MEDIUM, LOW findings and a Block or Approve verdict
Findings group by principle in a table. Checks Claude could not run are marked Not verified.
Read · Reporting

From the official docs

Questions

What does better-colors do?

It makes Claude build and audit color systems: palette ramps, token names, notation and contrast. It reports findings in a table and writes fixes in your project's notation.

How do I install better-colors?

Use the install box at the top of this page for this one skill. The repo README also gives an install for the whole collection and a Claude Code plugin route.

Will it change my brand colors?

No by default. The skill says a failing pair is a design decision: report it, leave the colors alone, and change them only when asked.

Does it compute real contrast numbers?

It says never to report a contrast value it did not measure and never to estimate a color it could compute. Without a browser it computes from the declared token pair, and it marks checks it could not run as Not verified.

Is better-colors safe to use?

It bundles no scripts and is made of instructions and reference guides. Claude can edit your style and token files when you ask for fixes, so review the diff before you commit.

better-colors vs better-accessibility?

Colors builds and measures. The skill says whether a pair is required to pass belongs to better-accessibility, a separate skill in the same repo. Colors also hands surfaces, shadows and icon color to better-ui.

Information

updated Nov 2, 2026

Repository: jakubkrehel/skills
Folder: skills/better-colors

jakubkrehel/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

better-colors SKILL.md · github.com
jakubkrehel/skills README · github.com