skills.rest
zomeru
zomeruCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

better-colors

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web projects often mix inconsistent color notations, suffer from hue drift in HSL palettes, fail contrast requirements, and clip out-of-gamut colors on modern displays. This Skill provides a systematic OKLCH-based workflow for converting, generating, and validating colors so interfaces stay perceptually consistent and accessible. ## Core Features & Use Cases - Color Conversion: Convert hex, rgb(), and hsl() values to oklch() with consistent formatting, including bulk migration of entire stylesheets while preserving gradients and CSS keywords. - Palette Generation: Build 5, 9, or 11-step numeric color scales with per-step gamut clamping, multi-hue palettes using equal chroma percentages, and tuned dark mode variants. - Contrast & Gamut Validation: Measure foreground/background pairs against APCA and WCAG 2 thresholds, detect hue drift, and add Display P3 fallbacks with @media (color-gamut: p3) patterns. - Use Case: When migrating a Tailwind v4 theme, convert all hex values in the @theme block to oklch, generate a brand-50 through brand-950 scale, then verify every text/background pair in both light and dark appearances. ## Quick Start Ask the AI to convert the hex colors in your theme.css file to oklch and check the contrast of your text colors against their backgrounds.

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?▼

Convert hex colors to oklch by replacing each value with its oklch(L C H) equivalent, for example #3b82f6 becomes oklch(0.623 0.188 259.815). Use slash syntax for alpha, leave CSS keywords like currentColor and transparent unchanged, and only convert color stops inside gradients.

How to generate a color palette with oklch?▼

Generate a palette by distributing lightness evenly from maxL to minL across numeric steps (50 to 950), then clamping each step's chroma to the maximum for its lightness and hue. Use the same chroma percentage across hues so multi-hue palettes appear equally vivid.

APCA vs WCAG 2 contrast ratio, which should I use?▼

APCA is the recommended default because it is perceptually accurate and pairs naturally with oklch lightness, targeting Lc 75 for body text and Lc 60 for non-body text. WCAG 2 ratios (4.5:1 AA, 7:1 AAA) remain necessary when making formal WCAG 2.x conformance claims.

Does Tailwind v4 support oklch colors?▼

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

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

Clipping happens when chroma exceeds the sRGB gamut maximum for that lightness and hue, which varies by hue (cyan peaks lowest, purple highest). Fix it by reducing chroma while keeping L and H constant, and add a @media (color-gamut: p3) enhancement for wide-gamut displays.

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 representation for one value creates inconsistency; reserve conversion for agreed color-system migrations or projects already standardizing on OKLCH.

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
atro2829-hubatro2829-hub

visual-design-foundations

Define typography, color, spacing, and iconography systems with semantic tokens.

Community
Advanced
Marcu-LoretoMarcu-Loreto

reversa-design-system

Extract design tokens from CSS, theme files, and screenshots into documentation.

Community
Advanced