Tailwind CSS v4 Color System: Complete Guide to OKLCH Colors

Introduction to Tailwind CSS v4 Colors

Tailwind CSS v4 represents a significant evolution in how we work with colors on the web. The framework has moved from traditional RGB-based colors to OKLCH (Oklab Lightness Chroma Hue), a perceptually uniform color space that delivers more consistent and vibrant results.

What is OKLCH?

OKLCH is a cylindrical representation of the Oklab color space, consisting of:

• L (Lightness): 0% to 100%, representing how light or dark the color appears
• C (Chroma): 0 to ~0.4, representing color intensity/saturation
• H (Hue): 0 to 360 degrees, representing the color angle on the color wheel

Why OKLCH Matters

Traditional color spaces like RGB and HSL have a significant flaw: they're not perceptually uniform. This means that colors with the same "lightness" value can appear drastically different to human eyes.

/* Old HSL - These look different despite same lightness */
.blue { color: hsl(220, 100%, 50%); }
.yellow { color: hsl(60, 100%, 50%); }

/* OKLCH - Perceptually consistent */
.blue { color: oklch(60% 0.25 250); }
.yellow { color: oklch(60% 0.25 90); }

Benefits You'll Notice

1. Consistent Contrast: Colors maintain readable contrast across the palette
2. Smoother Gradients: Gradients between colors look more natural
3. Predictable Darkening: Dark mode colors feel balanced
4. Vibrant Colors: Full gamut support for P3 displays

Migrating from v3 to v4

Use our Hex to Tailwind and Color Converter tools for seamless migration. Test accessibility with our Contrast Checker.

Best Practices

1. Use semantic color names: bg-primary instead of bg-blue-500
2. Define color scales: Create full 50-950 scales for custom colors
3. Test on multiple displays: P3 colors may look different on sRGB monitors
4. Maintain accessibility: Always check contrast ratios

Ready to explore? Try our Color Explorer to see all Tailwind v4 colors in action.