# better-colors

> Claude/Codex skill by [@jakubkrehel](https://omgskills.com/library/jakubkrehel/index.md) · 12k stars · Updated 2026-11-12

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

## Install

```sh
git clone https://github.com/jakubkrehel/skills /tmp/skills && ln -s /tmp/skills/skills/better-colors ~/.claude/skills/better-colors
```

## From README

Colors This skill builds and audits color systems. It generates ramps, maps their steps to roles and token names, converts notation and measures rendered contrast pairs. Never report a contrast value you did not measure, and never estimate a color you could compute. Notation, a tinted neutral and a gradient's interpolation space are project choices, not findings. A broken role mapping, a failing pair and an out-of-gamut step are findings. Perceived lightness throughout means OKLCH L, from 0 to 1. Whether a pair is required to pass belongs to better-accessibility. Surfaces, shadows and icon color belong to better-ui. Match the project's color system Reuse the project's tokens and notation. A consistent hex system beats hex with oklch() scattered through it. For a new system, oklch() is the best default, because its numbers behave the way the ramp rules below describe. Everywhere else, a color library produces the same ramp in the project's own notation (color-formats.md).

## Links

- HTML page: https://omgskills.com/library/jakubkrehel/skills/better-colors/
- GitHub: https://github.com/jakubkrehel/skills
- Author: [@jakubkrehel](https://omgskills.com/library/jakubkrehel/index.md)

## More from this repo

- [better-interface](https://omgskills.com/library/jakubkrehel/skills/better-interface/index.md) — Reviews a screen, flow or whole interface across accessibility, layout, writing, typography, color and UI polish, and...
   - [@jakubkrehel](https://omgskills.com/library/jakubkrehel/index.md) · 9k stars
- [better-layout](https://omgskills.com/library/jakubkrehel/skills/better-layout/index.md) — Sets grouping, alignment, reading order, responsive structure and room for translated text, so a layout holds up when...
   - [@jakubkrehel](https://omgskills.com/library/jakubkrehel/index.md) · 9k stars

## More skills by this author

- [make-interfaces-feel-better](https://omgskills.com/library/jakubkrehel/make-interfaces-feel-better/make-interfaces-feel-better/index.md) — Used to design engineering principles for making interfaces feel polished.
   - [@jakubkrehel](https://omgskills.com/library/jakubkrehel/index.md) · 3.5k stars