How it works
- 1
Pick a seed color
Use the color picker, type a hex value, or click one of the quick-start presets. The seed color drives all palette generation.
- 2
Choose a color harmony
Select from 6 harmony types: Complementary (2 colors), Analogous (3), Triadic (3), Tetradic (4), Split-Complementary (3), or Monochromatic (5 shades).
- 3
Export in your format
Copy individual swatch hex values, click shade steps, or use the Export panel to get CSS custom properties, a Tailwind config object, or a JSON array.
Color Harmony
Complementary Palette
#6467f2
hsl(239, 85%, 67%)
#f2ef64
hsl(59, 85%, 67%)
Shade Scale (Tailwind-style, 50–950)
Hover any shade to see its step number — click to copy hex
Export
:root {
/* Harmony palette */
--color-1: #6467f2; /* Primary */
--color-2: #f2ef64; /* Secondary */
/* Shade scale */
--palette-50: #f1f1fe;
--palette-100: #dedffc;
--palette-200: #c2c3fa;
--palette-300: #9395f6;
--palette-400: #5b5df1;
--palette-500: #2226ec;
--palette-600: #1215ca;
--palette-700: #0e11a4;
--palette-800: #0b0d7f;
--palette-900: #070954;
--palette-950: #050638;
}🛡️ Verify zero uploads — open DevTools → Network tab
Open your browser's DevTools (F12), go to the Network tab, and use this tool. You will see zero outbound requests — all processing runs inside your browser sandbox via WebAssembly or pure JavaScript. Nothing you paste or upload is ever sent anywhere.
Use cases
Bootstrap a design system
Pick your brand color, generate a triadic palette for accent colors, and export the shade scale as Tailwind config tokens ready to drop into tailwind.config.js.
Find accessible contrast pairs
Generate a monochromatic scale and visually identify which shade combinations meet WCAG AA contrast ratios for text on background.
Explore brand color alternatives
Use complementary and split-complementary harmonies to find colors that work alongside an existing brand primary — useful for CTA button colors and hover states.
Frequently Asked Questions
What is a color harmony?
A color harmony is a set of colors that look visually balanced together, derived by rotating around the HSL color wheel from a seed hue. Complementary colors sit opposite each other (180°); analogous colors are adjacent (±30°); triadic are evenly spaced at 120°; tetradic at 90°.
How is the Tailwind shade scale generated?
The shade scale takes the hue and saturation from your seed color, then generates 11 lightness steps (50 through 950) matching the Tailwind color scale convention. Step 500 corresponds to approximately your seed color's lightness.
Can I use this to pick accessible text colors?
The shade scale helps visually — lighter shades work as backgrounds, darker shades as text. For precise WCAG contrast ratios, paste pairs into a contrast checker. A useful rule of thumb: steps 50–300 pair well with 700–950 for at least 4.5:1 contrast.
What format does the Tailwind export produce?
The Tailwind export produces a JavaScript object suitable for the extend.colors section of tailwind.config.js. It includes a 'palette' key with named harmony colors and a 'palette-scale' key with the 50–950 shade steps.
Does anything leave my browser?
No. All color math runs in JavaScript inside your browser tab. No API calls are made — you can use this tool completely offline.
Want unlimited access + saved history?
Pro is $9/month · 30-day money-back guarantee.