better-colors
Skill0 starsChanged 55 days agoMITView on GitHub
OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
30 other projects use a version of this, 7 of them edited.
Adopted by
Most recently taken up by
- yht-4403/jc-agent-skillstheir own version, first seen Nov 8, 2026
- memi-design/design-skillsedited, first seen Nov 8, 2026
- Tresnanda/kyberntheir own version, first seen Nov 8, 2026
- genex-games/genex-desktoptheir own version, first seen Nov 8, 2026
- compozy/compozytheir own version, first seen Nov 7, 2026
- cill-i-am/skillstheir own version, first seen Nov 1, 2026
Used with
Projects with it also use improve-ui, good-css and 9 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
Discriminative-shoji607Skillimprove-ui
Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff.
Also in 3 projects that use this
sanmidableSkillgood-css
Also in 3 projects that use this
ItamarZand88Skillcreate-design-md
Create a new DESIGN.md file for any website, app, or custom design system. Use when the user wants to document a design system in DESIGN.md format, extract design tokens from a URL or existing CSS, create a custom design system from scratch, author a DESIGN.md for their own project, or contribute a new design to the awesome-design-md collection. Also trigger when user mentions "design system documentation", wants to formalize their app's visual language, or asks to create or generate a DESIGN.md file.
Also in 3 projects that use this
agentset-aiSkillfixing-metadata
Ship correct, complete metadata.
Also in 3 projects that use this
wxyhgkSkillfind-animation-opportunities
Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it. Use when the user asks "what could be animated here?" or wants to "make this feel more alive". For fixing existing animations, use improve-animations or review-animations instead.
Also in 6 projects that use this
VercelSkillbaseline-ui
Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
Also in 3 projects that use this
Other versions30 projects use a version of this.
Word for word · 0
None found.
Edited · 7
- trycompai/crm★ 12k31% same
- talebook/talebook★ 5.9k39% same
- julianromli/faiz-skills★ 1631% same
- memi-design/design-skills★ 791% same
- frankie323/Skills★ 131% same
- SkotAlexsander/skills★ 131% same
- elpiarthera/vantage-starter★ 095% same
Wrote their own version · 23
- jakubkrehel/skills★ 12ksame name
- compozy/compozy★ 2.9ksame name
- moumen-soliman/uitripled★ 1.4ksame name
- genex-games/genex-desktop★ 810same name
- Atharvsinh-codez/ObsidianUI★ 562same name
- boraoztunc/skills★ 454same name
- Dimon94/dverity★ 107same name
- Dimon94/skills★ 107same name
- Tresnanda/kybern★ 83same name
- 0xPasho/agentcut★ 21same name
13 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository9 other files it gives its agents.
- agent-browserSkill
- anti-slopSkill
- better-typographySkill
- better-uiSkill
- hydrateSkill
- ingestSkill
- make-interfaces-feel-betterSkill
- shipSkill
- simplySkill
The file
We split this skill into the rules it gives an agent
2 rules. 0 are common, 2 are distinctive, and 0 are very specific to this project.
0
Common
Most of the 30 edited versions we read keep these.
2
Distinctive
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 26
Finite gamut: Not every oklch value maps to a displayable sRGB color.
- Distinctive: line 63
Always present color changes as a markdown table with Before and After columns.
“Common” is measured: kept by at least 6 in 10 of the 30 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Vendored from jakubkrehel/skills by Jakub Krehel. MIT — see LICENSE.
OKLCH Colors
OKLCH is a perceptually uniform color space where the numbers actually mean what you think they mean. Most color problems in CSS — broken palettes, failing contrast, hue drift — come from using color spaces that don't match how we see. OKLCH fixes the model so the tools work. 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, fixing failing contrast | accessibility-contrast.md |
| Gamut & Tailwind | P3 fallbacks, @theme scales, gamut clamping | gamut-and-tailwind.md |
Why OKLCH
- Perceptual uniformity. Equal L steps = equal brightness.
oklch(0.5 ...)is visually mid. HSL'slightness: 50%varies wildly by hue. - Stable hue. HSL blue shifts toward purple as lightness changes. OKLCH hue stays constant across the full lightness range.
- Independent chroma. Chroma is an absolute measure of colorfulness that doesn't depend on lightness. HSL saturation does.
- Finite gamut. Not every oklch value maps to a displayable sRGB color. High-chroma values at certain hues will clip — gamut awareness is required.
OKLCH Syntax
oklch(L C H)
oklch(L C H / alpha)| Channel | Range | Description |
| L (Lightness) | 0–1 | 0 = black, 1 = white. Perceptually uniform. |
| C (Chroma) | 0–~0.4 | Colorfulness. 0 = gray. Max depends on L and H. |
| H (Hue) | 0–360 | Hue angle in degrees. |
| alpha | 0–1 | Optional transparency. Slash syntax. |
oklch(0.637 0.237 25.331)
oklch(0.8 0.05 200 / 0.5)Formatting: L and C use 3 decimal places, H uses up to 3. Drop trailing zeros. Format -0 as 0. Browser support: Baseline 2023, 96%+ global coverage.
Key Thresholds
| Rule | Value |
| Light/dark boundary | L > 0.6 = light background → use dark text |
| Lightness gap (light bg) | Foreground L < 0.45 when background L > 0.85 |
| Lightness gap (dark bg) | Foreground L > 0.75 when background L < 0.25 |
| Hue drift threshold | > 10° spread across palette steps = visible drift |
| APCA normal text | |Lc| >= 60 to pass, >= 75 for pass+ |
| WCAG 2 normal text | 4.5:1 AA, 7:1 AAA |
| Contrast fix | Adjust L only — chroma has negligible effect |
Review Output Format
Always present color changes as a markdown table with Before and After columns. Include every color that was changed — not just a subset. Never list findings as separate "Before:" / "After:" lines outside of a table.
| Before | After |
color: #3b82f6 | color: oklch(0.623 0.188 259.815) |
| Same absolute C across hues | Same C% of each hue's max chroma |
| No sRGB fallback for P3 color | @media (color-gamut: p3) wrapper |
This keeps feedback scannable and diff-friendly. Each row is a self-contained change the developer can act on independently.
Common Mistakes
| Issue | Fix |
| Hex/rgb/hsl color in new code | Convert to oklch() |
| HSL palette ramp with hue drift | Rebuild with constant oklch hue |
| Failing contrast (check foreground vs its background using APCA) | Adjust oklch L channel, keep C and H |
| High chroma without gamut check | Clamp to max chroma for the L/H in sRGB |
| Same absolute C across different hues | Use same C% (percentage of max) for consistent vividness |
| P3 color without sRGB fallback | Add @media (color-gamut: p3) pattern |
| Dark mode with hand-picked colors | Derive from light palette by reversing L mapping |
Hex in Tailwind v4 @theme | Convert to oklch values |
| Alpha with comma syntax | Use slash: oklch(L C H / alpha) |
Reference Files
- color-conversion.md — Supported formats, conversion examples, bulk conversion rules, what to leave alone
- palette-generation.md — Scale convention, generation algorithm, multi-hue palettes, dark mode, why not HSL
- accessibility-contrast.md — APCA and WCAG 2 thresholds, fixing contrast with L, lightness gap guide, hue drift detection
- gamut-and-tailwind.md — sRGB vs P3, gamut clamping, CSS fallback patterns, Tailwind v4 @theme and migration
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.