Tailwind Color Wheel Generator
Rotate the interactive wheel to calculate harmonious harmonies and instantly generate full 11-step Tailwind shade scales (50 to 950) with 1-click code export.
Tailwind Shade & Harmony Generator
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Primary Base
#2463EBoklch(0.546 0.215 262.7)
Secondary
#EB2463oklch(0.613 0.228 10.4)
Accent
#63EB24oklch(0.831 0.250 138.7)
Live UI Component Preview
Apex Analytics
Team Dashboard
$84,290
14,820
Optimal
Interactive Button & State Styles
Verify clickability, state contrasts, and visual weight across primary and secondary controls.
WCAG 2.1 Contrast Matrix
Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).
| Color Role | Hex | On Pure White (#FFF) | On Dark Obsidian (#0B0F19) | Recommended Usage |
|---|---|---|---|---|
Primary Base | #2463EB | 5.17:1(AA) | 3.70:1(AA (large text)) | Best on Light UI / Backgrounds |
Secondary | #EB2463 | 4.23:1(AA (large text)) | 4.53:1(AA) | Best on Dark UI / Buttons |
Accent | #63EB24 | 1.56:1(Fail) | 12.26:1(AAA) | Best on Dark UI / Buttons |
50–950 Tailwind Shade Ramp
Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.
Ready-to-Use Code Snippets
// tailwind.config.js / CSS @theme
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#F5F6FA',
100: '#E7EBF3',
200: '#B4CAF8',
300: '#86A9F4',
400: '#4E81EF',
500: '#2463EB',
600: '#124BC4',
700: '#0F3C9F',
800: '#0B2C75',
900: '#021C55',
950: '#011132',
},
secondary: '#EB2463',
accent: '#63EB24',
}
}
}
};How the Tailwind 50–950 Shade Generator Works
When styling frontend interfaces with Tailwind CSS, a single hex code is rarely enough. You need lighter shades (50, 100) for pill backgrounds and table hovers, mid-tones (500, 600) for interactive buttons, and deep shades (800, 900) for high-contrast typography.
Tailwind v4 @theme CSS Variables
In Tailwind v4, config files are replaced with native CSS @theme rules. UI Wheel formats all exported palettes as modern custom properties ready to paste directly into your app/globals.css.
--color-brand-500: #3b82f6;
--color-brand-600: #2563eb;
}
Perceptual Saturation Compensation
Unlike primitive color calculators that wash out light shades into muddy grays, our algorithm adjusts saturation dynamically at lower lightness steps to preserve vibrant tint identity.
50: 95% Lightness + Saturation Boost
950: 10% Lightness + Deep Shadow Depth
Frequently Asked Questions
How do I add these generated shades to Tailwind CSS v4?
In Tailwind v4, open your main CSS file (e.g. app/globals.css) and paste the exported @theme block: `@theme { --color-brand-50: #eff6ff; ... --color-brand-950: #172554; }`. You can now use classes like `bg-brand-500` or `text-brand-900` across all JSX templates.
How do I add these shades to Tailwind CSS v3?
In Tailwind v3, open `tailwind.config.js` and paste the generated object into `theme.extend.colors`: `theme: { extend: { colors: { brand: { 50: '#eff6ff', 100: '...', 900: '...' } } } }`.
Why do standard naive hex lightness calculators fail for light shades (50 and 100)?
Standard linear interpolation washes out hue saturation at high lightness levels, turning brand blues or brand purples into dirty, chalky grays. UI Wheel applies dynamic saturation compensation so that shade 50 retains a clean, vibrant tint identity.
Does this generator support dark mode tokens?
Yes. In modern Tailwind design systems, dark mode typically inverts your scale hierarchy: shade 900/950 becomes your card background, shade 800 becomes your border, and shade 100/200 becomes your typography.