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 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.
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
MIT License
Copyright (c) 2026 Jakub Krehel
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.