Tailwind Color Palette Generator
Color palette generator
Build, tune, and export a practical 3-8 color palette.
Palette status
Analogous palette
5 editable colors • 0 locked
Live
5
Start color
Palette size
Color harmony
Palette editor
#0ea5e9
Use black text • 7.58:1
H 199 • S 89% • L 48%
#0d9a80
Use black text • 5.95:1
H 169 • S 84% • L 33%
#4769f7
Use black text • 4.63:1
H 228 • S 92% • L 62%
#0b8130
Use white text • 5:1
H 139 • S 84% • L 27%
#976afa
Use black text • 5.76:1
H 259 • S 94% • L 70%
Design preview
New collection
Color that works in context.
Preview the strongest text/background pair while keeping your base color as the primary action.
Accessibility snapshot
0 of 10 color pairs meet 4.5:1 for normal text.
Strongest pair
1.81:1
#0ea5e9 on #0b8130
Decorative palette harmony does not guarantee every pair is suitable for body text. Verify intended foreground/background roles.
Export palette
:root {
--color-1: #0ea5e9;
--color-2: #0d9a80;
--color-3: #4769f7;
--color-4: #0b8130;
--color-5: #976afa;
}Palette notes
Harmony is generated in HSL from the selected web color. All processing stays in your browser.
Flow
- Convert base color to HSL.
- Apply analogous, monochromatic, complementary, split-complementary, triadic, or tetradic relationships.
- Adjust tonal variation, convert colors to HEX, and calculate black/white text contrast.
Example
Worked example: base #0ea5e9
- 1 Base hue is extracted
- 2 Analogous offsets and tonal variation are applied
- 3 Five editable colors are produced
The palette can be locked, previewed, contrast-checked, and exported as design tokens.
How
- Enter a HEX base color or choose a preset.
- Choose a harmony and palette size, then generate tonal variations.
- Edit or lock individual swatches and review text contrast plus the UI preview.
- Export the palette as a HEX list, CSS variables, Tailwind colors, or JSON.
Avoid
- Using generated palette without contrast validation.
- Assuming all generated colors are suitable for text.
- Ignoring brand constraints when applying hue shifts.
- Treating decorative harmony as proof that every pair meets WCAG contrast.
FAQ
Can I regenerate from a different base color?
Yes. Enter HEX, use the color picker, choose a preset, or use Surprise me. Locked swatches remain unchanged during variations.
Does this include neutral gray scales?
Monochromatic mode can create tonal scales from neutral or low-saturation base colors.
Can I use palette colors in Tailwind tokens?
Yes. The export panel provides Tailwind-ready colors as well as CSS variables, JSON, and a HEX list.
Does a generated palette automatically meet accessibility requirements?
No. The tool recommends black or white text for each swatch and reports pairwise 4.5:1 contrast, but you must verify the exact foreground and background roles used in your design.
Switch
Switch12
No match.