skills.rest
chhpt
chhptCOMMUNITY
Explore all skills by this author →
GitHub

better-colors

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

Updated Aug 23, 2026
Search Tags:#contrast#tailwind#dark mode#oklch#color conversion#palette generation#gamut
One-click install
npx skills add https://github.com/chhpt/skills --skill better-colors-chhpt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: better-colors
Source: https://github.com/chhpt/skills/tree/main/skills/better-colors
Command: npx skills add https://github.com/chhpt/skills --skill better-colors-chhpt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web projects often rely on hex, RGB, or HSL colors that produce inconsistent perceived brightness, hue drift across palette steps, failing contrast ratios, and out-of-gamut clipping on modern displays. This Skill provides a systematic OKLCH-based workflow for converting colors, building palettes, verifying accessibility, and theming with Tailwind v4. ## Core Features & Use Cases - Color Conversion: Convert hex, rgb(), and hsl() values to oklch() with consistent formatting, slash alpha syntax, and rules for what to leave unchanged (keywords, gradient functions, third-party configs). - Palette Generation: Build 5, 9, or 11-step numeric scales with even lightness distribution, per-step chroma clamping to the gamut boundary, multi-hue palettes using equal chroma percentages, and dark mode derivation. - Contrast & Accessibility: Measure foreground/background pairs with APCA (Lc thresholds) or WCAG 2 ratios, detect light vs dark backgrounds at the L 0.73 crossover, and fix failing pairs by adjusting lightness while preserving chroma and hue. - Gamut & Tailwind v4: Handle sRGB vs Display P3 gamut boundaries, add @media (color-gamut: p3) fallbacks, and define custom @theme color scales in oklch. - Use Case: Migrating a design system to Tailwind v4? Convert every hex token in @theme to oklch, generate a full brand scale, then verify every foreground/background pair in both light and dark appearances. ## Quick Start Convert the hex colors in my theme.css to oklch and check the text contrast against APCA thresholds.

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 or rgb colors to oklch in CSS?▼

Convert hex, rgb(), and hsl() values to the oklch(L C H) format, using slash syntax for alpha like oklch(0.623 0.188 259.815 / 0.5). Leave CSS keywords such as currentColor and transparent unchanged, and only convert color stops inside gradients, not the gradient function itself.

How do I generate a color palette in oklch?▼

Distribute lightness evenly from the base color across a numeric scale (50 to 950), 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 so all hues appear equally vivid.

What is the difference between APCA and WCAG 2 contrast ratios?▼

APCA measures perceptual lightness contrast (Lc) and is polarity-aware, requiring Lc 75 for body text and Lc 60 for non-body text. WCAG 2 uses a luminance ratio requiring 4.5:1 for normal text at AA. APCA is the recommended default; WCAG 2 remains necessary for formal conformance claims.

Does Tailwind v4 support oklch colors?▼

Yes, Tailwind CSS v4 defines its default palette in oklch and supports custom scales through the @theme block, such as --color-brand-500: oklch(0.623 0.188 250). Opacity modifiers like bg-brand-500/50 compile to oklch slash-alpha syntax automatically.

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

High-chroma oklch values can exceed the sRGB gamut and clip, since maximum chroma varies by lightness and hue. Clamp chroma to the gamut boundary and add an @media (color-gamut: p3) block with a wider-gamut value so P3 displays get the enhanced color while others get the sRGB fallback.

When should I not convert a project to oklch?▼

Do not convert when the project has an established, consistent hex or RGB token system and the task is an isolated fix. Introducing a second color notation for one value creates inconsistency; conversion is appropriate only for new color systems or agreed migrations.

Related Skills

Explore More Design & Creative Skills→
Dragoon0xDragoon0x
4

color

Generate color token files from detected codebase palettes in CSS, Tailwind, or JavaScript formats.

Community
Intermediate
mikkermikker
102

oklch-skill

Convert hex, rgb, hsl inputs to OKLCH values for Tailwind v4 theming.

Community
Intermediate
AO-HySAO-HyS

better-interface

Orchestrates cross-discipline interface reviews across accessibility, layout, writing, typography, color, and UI polish.

Official
Advanced
DVNghiemDVNghiem
20

design-tokens

Standardize color, typography, spacing, and border tokens across platforms.

Community
Intermediate