Skip to content
Get packs

Better Colors

Builds and audits color systems: palettes, semantic tokens, format conversion and measured contrast.

Source Download skill
Repository
jakubkrehel/skills
Stars
10,236
Licence
MIT
Files
8 files

What it does

When this skill is installed, the agent reviews and builds color systems for websites and apps with more discipline. It generates color ramps (light-to-dark steps of one hue), maps those steps to jobs like background, border and body text, names design tokens by role rather than by color, converts between color notations, and measures contrast between text and its actual background. It reports problems such as a token used in the wrong role or a failing contrast pair, and it leaves the colors unchanged unless asked to change them.

Great for

  • Front-end developers setting up or cleaning up a design system's colors
  • Designers who want their palette checked for structure and consistent naming
  • Teams migrating a codebase between color notations such as hex and OKLCH

Skip it if

  • Projects that only need a quick color pick with no system behind it, since the skill's rules add process that is overkill there
  • Accessibility compliance sign-off on its own: pass/fail requirements belong to a separate skill (better-accessibility), and this one only computes contrast values
  • Anyone expecting it to verify visual appearance without a browser, since without one it only checks declared token values and computed contrast

Try asking

  • “Generate a 12-step accent color ramp in OKLCH for my brand color #3B6EF0 and map the steps to background, border and text roles”
  • “Audit my CSS variables for semantic token naming problems and tell me which components use primitives directly”
  • “Check whether my secondary text color on the card background meets contrast requirements and report the measured ratio”
  • “Convert my hex palette to oklch() and keep the same visual ramp”
Step-by-step guide: how to use Better ColorsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    better-colors.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip better-colors.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip better-colors.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 color files or tokens so it reuses your notation and naming instead of introducing new ones.
  • Ask for a measured contrast value for each text pair you care about, and say which background it renders on.
  • Pair this skill with a browser-based check if you want rendered results rather than values computed from declared tokens.

What's inside

  • agents/openai.yaml
  • color-formats.md
  • color-usage.md
  • contrast.md
  • palette-generation.md
  • palette-structure.md
  • SKILL.md
  • token-naming.md

Redistributed unmodified from jakubkrehel/skills 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.