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
#3B82F6@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',
}
}
}
}
}Dashboard Preview
Project Neon
Scale Up Your UI
Beautifully consistent color ramps for shadows, borders, and overlays.
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.
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.
STOP GUESSING.
START GENERATING.
The best developers use tools that guarantee consistency. Join the pros building with OKLCH.