better-colors

Installation
SKILL.md

OKLCH Colors

OKLCH is a perceptually uniform color space where lightness, chroma, and hue are useful design controls. Use it when the project already uses OKLCH, when creating a new color system, or when the user asks for conversion or palette work. Otherwise preserve the project's established tokens and notation: a consistent hex or RGB token system is better than introducing a second color representation for an isolated fix. To explore interactively, visit oklch.fyi.

Quick Reference

Category When to use Reference
Conversion Hex/rgb/hsl to oklch color-conversion.md
Palettes Generate scales, multi-hue, dark mode palette-generation.md
Contrast APCA/WCAG checks, reporting failures, fixing on request accessibility-contrast.md
Gamut & Tailwind P3 fallbacks, @theme scales, gamut clamping gamut-and-tailwind.md
Usage Semantic tokens, one meaning per color, primary-action emphasis, appearance variants color-usage.md

Core Principles

1. Use a Perceptual Color Space

Installs
1
GitHub Stars
5
First Seen
3 days ago
better-colors — bjornmelin/dev-skills