The Science of Perfect Palettes
Don't settle for muddy color scales. Generate professional 50–950 Tailwind palettes powered by OKLCH perceptual modeling.
THE HARMONY
@theme {
--color-brand-50: oklch(0.970 0.028 259.81);
--color-brand-100: oklch(0.940 0.066 259.81);
--color-brand-200: oklch(0.880 0.122 259.81);
--color-brand-300: oklch(0.810 0.160 259.81);
--color-brand-400: oklch(0.710 0.179 259.81);
--color-brand-500: oklch(0.620 0.188 259.81);
--color-brand-600: oklch(0.540 0.184 259.81);
--color-brand-700: oklch(0.480 0.173 259.81);
--color-brand-800: oklch(0.420 0.158 259.81);
--color-brand-900: oklch(0.380 0.141 259.81);
--color-brand-950: oklch(0.280 0.113 259.81);
}module.exports = {
theme: {
extend: {
colors: {
brand: {
'50': '#eaf6ff',
'100': '#d2edff',
'200': '#a8d9ff',
'300': '#82c0ff',
'400': '#5a9fff',
'500': '#3a81f5',
'600': '#2368d7',
'700': '#1657bd',
'800': '#0b46a1',
'900': '#093d8b',
'950': '#00245f',
}
}
}
}
}Interactive Sandbox & Preview
System Status Update
Your color palette has been verified against contrast metrics and gamuts. Ready to use.
Hue Retention
Unlike RHB or HSL, OKLCH ensures the "blue-ness" or "red-ness" stays exactly the same even as you go from light to dark.
V4 Ready
Tailwind CSS v4 uses OKLCH natively. Our generator provides the exact syntax to drop into your new CSS theme blocks.
System Scaling
By generating all 11 shades at once, you maintain visual rhythm across borders, cards, and background surfaces.
How the Scale is Weighted
Our algorithm mimics the official Tailwind v4 "Curvature" logic.
Lightness Mapping
We apply non-linear lightness steps to ensure the '500' shade feels central and the '50' feels truly pale.
Chroma Compensation
Extreme dark and light shades have their chroma reduced to avoid radioactive-looking colors in UI gaps.
Gamut Clipping
We automatically clip out-of-gamut colors to the nearest P3 or sRGB equivalent to ensure browser stability.
Contrast Balancing
Every shade is validated against standard WCAG contrast ratios for utility text pairings.
Pro Tips for Design Systems
Use 500 as your Primary
The 500 shade is designed to be the "truest" version of your color. Use it for primary actions and buttons.
Surface Layering
Use 50 for page backgrounds, 100 for card backgrounds, and 200 for borders to create natural depth.
Semantic Dark Mode
When switching to dark mode, your 900 shade usually becomes the background, and 50 becomes the text.
Common Use Cases
Brand Identity
Standardize marketing materials with a unified color language.
Status Indicators
Create custom Danger (Red), Success (Green), and Warning scales.
Data Viz
Generate distinguishable series of colors for charts and graphs.
SaaS Dashboards
Build complex interfaces with consistent contrast and hierarchy.
HSL vs OKLCH: Why Modern Design Systems are Upgrading
Understanding how color math affects visual consistency in Tailwind CSS palettes.
The Problem: Hue Shift in HSL
Traditional generators use HSL (Hue, Saturation, Lightness). However, HSL lightness does not match human eye perception. For instance, pure yellow and pure blue have the same HSL lightness of 50%, but yellow looks drastically brighter to humans. When HSL scales calculate lighter or darker shades, they inadvertently shift the hue (e.g. blue becomes muddy violet, orange turns brown).
The Solution: Perceptual Uniformity in OKLCH
OKLCH (Lightness, Chroma, Hue) is a perceptually uniform color space. Lightness (L) matches how bright a color actually appears to the human eye. Chroma (C) controls color purity/intensity, and Hue (H) stays completely stable. By scaling colors within OKLCH space, you guarantee that a shade 500 and 600 have identical hue properties, keeping colors vibrant and uniform.
Migrating to Tailwind CSS v4 @theme
In Tailwind CSS v4, theme configuration moves from `tailwind.config.js` to standard CSS variables inside an `@theme` block.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
500: '#3B82F6',
}
}
}
}
}/* global.css */
@theme {
--color-brand-50: oklch(0.97 0.03 259.8);
--color-brand-100: oklch(0.93 0.07 259.8);
...
--color-brand-500: oklch(0.62 0.21 259.8);
}Frequently Asked Questions
Most generators use simple HSL math which causes 'hue shift' (e.g., your blue turns purple-ish when dark). We use OKLCH, a perceptually uniform color space that matches how humans actually see colors, ensuring your scale looks like a professional design system.
Yes! In fact, it's built for it. We provide direct export for the new CSS-first @theme configuration used in v4, as well as the legacy JS config for v3.
We use WCAG 2.1 contrast formulas to automatically determine whether white or black text should be used on each shade, ensuring accessibility is built-in.
This follows the official Tailwind CSS convention. It provides enough range for backgrounds, borders, and text while maintaining a manageable design system.
OKLCH represents the future of web colors, delivering richer hues in P3 gamuts and ensuring visual brightness levels scale uniformly across light and dark modes.
STOP GUESSING.
START GENERATING.
The best developers use tools that guarantee consistency. Join the pros building with OKLCH.