OKLCH Color
Online Tools

Master the Future of Color

Stop guessing with HSL. Create perceptually uniform, accessible, and vibrant color palettes using the OKLCH color space. Optimized for modern displays and design systems.

Why OKLCH?

Controls

%
°
%

#26a9f1

Current Color

Contrast (Assume Solid)

WCAG 2.1 Ratio

Txt
2.62
Txt
8.03

CSS Output

Recommended

Tailwind CSS Integration

v3 Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-240': 'oklch(70% 0.15 240)',
      }
    }
  }
}

v4 Theme

@theme {
  --color-brand-240: oklch(70% 0.15 240);
}

Palettes

Auto-generated harmonies based on current OKLCH values.

Lightness Scale

Harmonies

Complementary
Triadic
Copied to clipboard

Why use OKLCH?

Perceptual Uniformity

In older color spaces like HSL, "50% lightness" doesn't mean the same brightness for different colors. Yellow looks much brighter than blue.

OKLCH fixes this. Changing Hue doesn't change perceived brightness. This makes creating accessible, consistent color systems effortless.

  • No "muddy" gradients
  • Access to P3 Wide Gamut colors
  • Reliable accessibility contrast
HSL Gradient (Muddy Middle)
OKLCH Gradient (Vibrant)

Notice the greyish transition area in HSL vs the smooth blend in OKLCH.

Human Vision
Display P3
sRGB

Go Beyond sRGB

Traditional hex codes (like #ff0000) are limited to the sRGB color space, which covers only about 35% of visible colors.

Modern screens (Apple devices, OLEDs) support Display P3, which has ~50% more colors. OKLCH is the key to unlocking these vivid, neon-like colors on the web.

Frequently Asked Questions

Browser Support?
Excellent. Chrome 111+, Firefox 113+, Safari 15.4+, and Edge 111+ all support OKLCH natively. For older browsers, you can provide a HEX fallback.
How to handle fallbacks?
Use the color() function or simply define the property twice in CSS:
color: #4a90e2; /* Fallback */
color: oklch(65% 0.15 240); /* Modern */
Difference between OKLCH and LCH?
Both use Lightness, Chroma, and Hue. However, OKLCH is based on the newer "Oklab" color space (2020), which fixes a "hue shift" issue in blue colors found in the standard LCH (CIE LAB) space.