Color palette generator
Generate beautiful color palettes with the space bar. Lock colors, pick schemes and moods, check contrast, and export to CSS, Tailwind, ASE, or PNG.
Tailwind color generator
Generate a Tailwind CSS color scale (50–950) from any brand color. Export Tailwind v4 @theme, v3 config, CSS variables, or design tokens.
Preview
How to use Tailwind color generator
Turn any brand color into a complete Tailwind CSS color scale — 50, 100, 200 … 900 and 950 — that looks like it belongs in Tailwind's own palette. Paste a hex code and copy ready-made config for Tailwind v4 (@theme with oklch) or Tailwind v3 (tailwind.config.js).
How it works
The shape of each scale — how lightness, chroma and hue change from 50 to 950 — is learned from Tailwind's default palettes nearest in hue, then re-anchored so your exact color sits on one step. Feed it a Tailwind color and you get Tailwind's palette back exactly.
- Add several colors (primary, secondary, neutral, success…) and export them together
- Choose which step your color sits at, or let it pick automatically
- See which shades pass WCAG AA with white text, plus a live UI preview
- Export CSS variables, SCSS, JSON or W3C design tokens for Figma
Tailwind color generator FAQs
Is Tailwind color generator free?
Tailwind color generator is a free online tool on ReallyUseful.Tools. No account is required.
Does Tailwind color generator run in my browser?
Tailwind color generator is designed to run in your browser where supported, so files can stay on your device instead of being uploaded to a server.
More Colors
Color picker & converter
Pick any color and get HEX, RGB, HSL, CMYK, OKLCH, and code values. Eyedropper, color names, harmonies, tints and shades, and contrast.
Color wheel
Interactive color wheel for complementary, analogous, triadic, and other color schemes. Switch between the artist's RYB wheel and the RGB wheel.
Color palette from image
Extract a color palette from any photo or design. Drag markers to fine-tune colors, then export CSS, Tailwind, JSON, Adobe ASE, or PNG.
CSS gradient generator
Design linear, radial, and conic CSS gradients visually. Drag color stops, blend in OKLab, add easing, and export CSS, Tailwind, SVG, or PNG.