Better Colors
trycompai/crm
OKLCH color space and color usage for web projects. An agent skill from trycompai/crm.
OKLCH color space for web projects. An agent skill from Dinil-Thilakarathne/sona-ui.
Install Oklch Skill
$ npx skills add Dinil-Thilakarathne/sona-ui --skill oklch-skill -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Dinil-Thilakarathne/sona-ui oklch-skill --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Dinil-Thilakarathne/sona-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/oklch-skill .claude/skills/oklch-skill && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "oklch-skill" agent skill from https://github.com/Dinil-Thilakarathne/sona-ui/tree/master/.agents/skills/oklch-skill into .claude/skills/oklch-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oklch-skill", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Dinil-Thilakarathne/sona-ui/tree/master/.agents/skills/oklch-skillType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Dinil-Thilakarathne/sona-ui --skill oklch-skill -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Dinil-Thilakarathne/sona-ui oklch-skill --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Dinil-Thilakarathne/sona-ui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/oklch-skill .agents/skills/oklch-skill && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "oklch-skill" agent skill from https://github.com/Dinil-Thilakarathne/sona-ui/tree/master/.agents/skills/oklch-skill into .agents/skills/oklch-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oklch-skill", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Dinil-Thilakarathne/sona-ui --skill oklch-skill -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Dinil-Thilakarathne/sona-ui oklch-skill --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Dinil-Thilakarathne/sona-ui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/oklch-skill .cursor/skills/oklch-skill && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "oklch-skill" agent skill from https://github.com/Dinil-Thilakarathne/sona-ui/tree/master/.agents/skills/oklch-skill into .cursor/skills/oklch-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oklch-skill", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Dinil-Thilakarathne/sona-ui.git --path .agents/skills/oklch-skill--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Dinil-Thilakarathne/sona-ui --skill oklch-skill -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Dinil-Thilakarathne/sona-ui oklch-skill --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Dinil-Thilakarathne/sona-ui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/oklch-skill .gemini/skills/oklch-skill && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "oklch-skill" agent skill from https://github.com/Dinil-Thilakarathne/sona-ui/tree/master/.agents/skills/oklch-skill into .gemini/skills/oklch-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oklch-skill", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Dinil-Thilakarathne/sona-ui oklch-skillInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Dinil-Thilakarathne/sona-ui --skill oklch-skill -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Dinil-Thilakarathne/sona-ui.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/oklch-skill .github/skills/oklch-skill && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "oklch-skill" agent skill from https://github.com/Dinil-Thilakarathne/sona-ui/tree/master/.agents/skills/oklch-skill into .github/skills/oklch-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oklch-skill", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Dinil-Thilakarathne/sona-ui --skill oklch-skill -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Dinil-Thilakarathne/sona-ui oklch-skill --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Dinil-Thilakarathne/sona-ui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/oklch-skill .opencode/skills/oklch-skill && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "oklch-skill" agent skill from https://github.com/Dinil-Thilakarathne/sona-ui/tree/master/.agents/skills/oklch-skill into .opencode/skills/oklch-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oklch-skill", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
oklch-skill- GitHub stars
- 118
- Used in
- 1 other repo
- Token cost
- ~1.2k tokens
- SKILL.md length
- 559 words
- Files
- 5
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- MIT
At a glance
OKLCH color space for web projects. An agent skill from Dinil-Thilakarathne/sona-ui.
- Color conversion
- SKILL.md covers Quick Reference, Why OKLCH, OKLCH Syntax and Key Thresholds, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Palette generation
What it does
Oklch Skill is an agent skill from Dinil-Thilakarathne/sona-ui. 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.
Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files (for example `accessibility-contrast.md`, `color-conversion.md` and `gamut-and-tailwind.md`).
It sits in Frontend & Design, covering Accessibility, Theming and dark mode and Design tokens. It works with Tailwind CSS. The repository describes itself as: A modern UI component library built with React and TailwindCSS to help you build beautiful and accessible web applications faster. The licence is MIT.
When your agent uses it
- Color conversion
- Palette generation
- Dark mode colors
Example prompts
- “/oklch-skill”
What it can do on your machine
Read from SKILL.md and the folder at commit 9a72ffe. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are css).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
oklch.fyi
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Oklch Skill loads about 1.2k tokens when it runs. Until then it costs about 77 tokens; SKILL.md has 559 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Dinil-Thilakarathne/sona-ui at commit 9a72ffe, republished under its MIT licence (© Dinil-Thilakarathne). 559 words, ~1,197 tokens.
Download SKILL.mdSave it as
.claude/skills/oklch-skill/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- oklch-skill
- description
- 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.
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 |
Show full SKILL.md (253 more words)Show less
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
© Dinil-Thilakarathne, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 4 other files in .agents/skills/oklch-skill of Dinil-Thilakarathne/sona-ui.
- SKILL.md
- accessibility-contrast.md
- color-conversion.md
- gamut-and-tailwind.md
- palette-generation.md
Open the folder on GitHubat commit 9a72ffe
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in Dinil-Thilakarathne/sona-ui, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Oklch Skill next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Oklch Skill this skillDinil-Thilakarathne/sona-ui | 118 | 1 repos | ~1.2k | Automated safety check: Pass | MIT | |
| Better Colorstrycompai/crm | 11k | — | ~1.9k | Automated safety check: Pass | MIT | |
| UI Design Systemtry-works/role-model | 117 | — | ~5k | Automated safety check: Pass | MIT | |
| Design Token Generatordylanfeltus/skills | 179 | — | ~2.9k | Automated safety check: Pass | MIT | |
| MCP Developmentcoollabsio/coolify | 63k | 1 repos | ~949 | Automated safety check: Pass | MIT | |
| Scalar Design Systemscalar/scalar | 16k | — | ~2.7k | Automated safety check: Pass | MIT |
Similar skills
UI Design System
try-works/role-model
React UI component systems with TailwindCSS + Radix + shadcn/ui.
Design Token Generator
dylanfeltus/skills
Generates type scales, color palettes, spacing systems, WCAG contrast checks and dark mode palettes from formulas, as CSS custom properties, a Tailwind config or JSON tokens.
MCP Development
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
Scalar Design System
scalar/scalar
Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.
Extract Design
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
More from Dinil-Thilakarathne/sona-ui
All 10 skills in this repoSona UI
Dinil-Thilakarathne/sona-ui
Discover and integrate Sona UI registry components. An agent skill from Dinil-Thilakarathne/sona-ui.
Smooth Shadow Ring
Dinil-Thilakarathne/sona-ui
A skill your agent uses when styling any elevated surface (card, dialog, popover, dropdown, menu, tooltip, sheet, toast) in a Tailwind project that has shadow-plugin installed.
Add Sona Component
Dinil-Thilakarathne/sona-ui
Integrate a new component into the Sona UI library end to end — the full per-component pipeline of writing the component, demo, docs, registry entry, nav link, playground controls, regenerating the…
Component Anatomy
Dinil-Thilakarathne/sona-ui
Create a source-backed Inspection Board around an existing Sona UI component for social demonstrations and later documentation experiments.
Design Motion Principles
Dinil-Thilakarathne/sona-ui
Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques.
Promote Portfolio Component
Dinil-Thilakarathne/sona-ui
Promote a finished Craft, experimental UI, or reusable React component from the user's portfolio into the Sona UI library through an approval-gated two-phase workflow.
Related
Works with
Categories
Questions about Oklch Skill
What does Oklch Skill do?
OKLCH color space for web projects. An agent skill from Dinil-Thilakarathne/sona-ui. Oklch Skill is an agent skill from Dinil-Thilakarathne/sona-ui. OKLCH color space for web projects.
When should I use Oklch Skill?
Oklch Skill fits situations like: color conversion; palette generation; dark mode colors.
How do I install Oklch Skill in Claude Code?
Run `npx skills add Dinil-Thilakarathne/sona-ui --skill oklch-skill -a claude-code`. Or copy the skill folder (.agents/skills/oklch-skill in Dinil-Thilakarathne/sona-ui) into .claude/skills/oklch-skill in your project. Claude Code loads it when a task matches its description.
How do I install Oklch Skill in Codex?
Run `npx skills add Dinil-Thilakarathne/sona-ui --skill oklch-skill -a codex`. Or copy the skill folder (.agents/skills/oklch-skill in Dinil-Thilakarathne/sona-ui) into .agents/skills/oklch-skill in your project. Codex loads it when a task matches its description.
Can I use Oklch Skill in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Dinil-Thilakarathne/sona-ui --skill oklch-skill -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/oklch-skill, .gemini/skills/oklch-skill, .github/skills/oklch-skill and .opencode/skills/oklch-skill in your project.
What does Oklch Skill need to run?
SKILL.md names no scripts, command-line tools or credentials: Oklch Skill is instructions for the agent only.
Does Oklch Skill access the network?
SKILL.md names 1 domain. As links in the text: oklch.fyi. This is read from the text; nothing was executed.
Is Oklch Skill safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Oklch Skill use?
Oklch Skill is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Oklch Skill use?
About 1.2k tokens (SKILL.md is roughly 4.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Oklch Skill?
Skills that share tags, products or a category with Oklch Skill: Better Colors (trycompai/crm, 11k stars), UI Design System (try-works/role-model, 117 stars), Design Token Generator (dylanfeltus/skills, 179 stars) and MCP Development (coollabsio/coolify, 63k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Oklch Skill?
Dinil-Thilakarathne (a GitHub user) maintains it in Dinil-Thilakarathne/sona-ui, which has 118 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 7, 2026.
Source: Dinil-Thilakarathne/sona-ui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.