Free tools / Colors
Tailwind color generator
Build Tailwind-ready shade scales from a base color. Export v4 @theme, classic config, CSS variables, or Electrik Slate tokens — free, no signup.
Generated palette
Click a swatch to copy its hex
Preview
Light surface
Ship with a clear brand color
Buttons and accents use your mid shade.
Dark surface
Same tokens, dark UI
Useful when theming Electrik Slate or a SaaS shell.
Accent callout on dark
Export
Discover schemes
Curated starting points — click to apply.
Tailwind color generator FAQ
What is a Tailwind color generator?
A Tailwind color generator builds a full shade scale (50–950) from a base color so you can use classes like bg-brand-500 in Tailwind CSS. This tool also exports Tailwind v4 @theme CSS, classic v3 config, plain CSS variables, and Electrik Slate token overrides.
Does this support Tailwind CSS v4?
Yes. The default export is a Tailwind v4 @theme block with --color-{name}-{shade} custom properties. You can also export a Tailwind v3 theme.extend.colors snippet if you are still on config-based Tailwind.
How do I use the palette in my project?
Copy the Tailwind v4 @theme output into your CSS next to @import "tailwindcss", or paste the v3 JSON into theme.extend.colors. Then use utilities such as bg-brand-500, text-brand-700, and border-brand-200.
What color harmony schemes are available?
Monochromatic, analogous, complementary, triadic, tetradic, and split complementary. Each scheme derives related hues from your base color, then builds a full shade ramp plus a matching neutral scale.
Can I export colors for Electrik Slate?
Yes. Choose the Slate tokens export to override --slate-primary and related tokens used by electrik/slate and Electrik apps, without replacing your whole Tailwind palette.
How many shades should I generate?
Eleven shades (50–950) match Tailwind’s default color scales and are best for design systems. Use nine or five for simpler brand kits.
Built for Laravel + Slate
Generate a palette here, then theme Electrik Slate or ship a full SaaS shell with Electrik.