skills.rest
compozy
compozyOFFICIAL
Explore all skills by this author →
Website𝕏@compozyaiGitHub

better-colors

Convert colors to OKLCH, generate palettes, and check contrast for web projects.

2.7k|171|Updated Mar 28, 2026
Search Tags:#contrast#Tailwind#oklch#color conversion#palette generation#Dark mode#Design tokens
One-click install
npx skills add https://github.com/compozy/compozy --skill better-colors
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: better-colors
Source: https://github.com/compozy/compozy/tree/main/.agents/skills/better-colors
Command: npx skills add https://github.com/compozy/compozy --skill better-colors

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Web projects often accumulate inconsistent color values, failing contrast pairs, hue-drifting HSL palettes, and out-of-gamut colors that clip on real displays. This Skill provides a systematic OKLCH-based workflow for converting colors, generating perceptually uniform palettes, verifying accessibility contrast, and theming with Tailwind v4.

Core Features & Use Cases

  • Color Conversion: Convert hex, rgb(), and hsl() values to oklch() with consistent formatting, preserving keywords, gradients, and existing token systems.
  • Palette Generation: Build 5, 9, or 11-step numeric scales with per-step gamut clamping, multi-hue palettes using equal chroma percentages, and tuned dark mode variants.
  • Contrast & Accessibility: Measure foreground/background pairs against APCA (Lc 75/90) and WCAG 2 (4.5:1/7:1) thresholds, report failures, and fix lightness on request.
  • Gamut & Tailwind v4: Clamp out-of-gamut chroma, add Display P3 fallbacks with @media (color-gamut: p3), and define custom @theme color scales in oklch.
  • Use Case: When migrating a stylesheet to Tailwind v4, convert all hex tokens in the @theme block to oklch, generate a brand-50 through brand-950 scale, and verify every text/background pair in both light and dark appearances.

Quick Start

Convert the hex colors in my theme.css to oklch and check the contrast of my primary button against its background.

Frequently Asked Questions about better-colors

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert hex colors to oklch in CSS?▼

Replace hex values with their oklch equivalents using the oklch(L C H) syntax, for example #3b82f6 becomes oklch(0.623 0.188 259.815). Use slash syntax for alpha, leave keywords like currentColor and transparent unchanged, and only convert color stops inside gradients.

How do I generate a color palette in oklch?▼

Distribute lightness evenly from maxL to minL across the 50-to-950 scale, then clamp each step's chroma to the maximum for its lightness and hue. For multi-hue palettes, use the same lightness and chroma percentage rather than the same absolute chroma value.

What contrast ratio do I need for accessible text?▼

APCA requires Lc 75 minimum for body text and Lc 60 for non-body text, while WCAG 2 requires 4.5:1 for normal text at AA level. APCA is the recommended default since it is perceptually grounded and pairs naturally with oklch lightness.

Does Tailwind v4 support oklch colors?▼

Yes, Tailwind CSS v4 defines its default palette in oklch and custom themes should follow the same convention. Define scales in the @theme block with oklch values and opacity modifiers like bg-brand-500/50 compile to oklch with slash alpha syntax.

Why do my oklch colors look wrong or clip on some displays?▼

High chroma values can exceed the sRGB gamut for a given lightness and hue, causing clipping. Reduce chroma while keeping L and H constant, and add a @media (color-gamut: p3) block to serve wider-gamut values only to P3-capable displays.

When should I not convert a project to oklch?▼

Do not convert isolated values in a project that intentionally uses hex or rgb notation, since a consistent existing token system is better than mixing representations. Reserve conversion for projects already using OKLCH, new color systems, or explicit migration tasks.

Related Skills

Explore More Design & Creative Skills→
ngochuy13ngochuy13

color-palette

Generate accessible brand and UI color palettes with WCAG contrast ratios.

Community
Advanced
marmelabmarmelab
26

shadcn-customization

Centralize shadcn/ui theming with semantic CSS variables for light and dark modes.

Official
Intermediate
PritahiPritahi

visual-design-foundations

Generate typography scales, color tokens, spacing grids, and iconography guidelines.

Community
Intermediate
791994545791994545
4

dogfood

Automate browser-based end-to-end tests and generate reports with reproduction evidence.

Community
Advanced