Color Palette Generator
Harmonious color palettes at the press of the space bar. Lock colors, pick a harmony, check contrast and export as CSS.
Open in editorTailwind Color Palette
The eleven Tailwind steps 50 to 950 from one color. Export for tailwind.config.js, @theme, OKLCH and HEX.
Open the generatorRuns right in your browser. Your graphics are made on your device.
Start from a preset
Pick a preset and it opens right in the editor, ready to adjust.
What is it?
Tailwind CSS arranges every color in eleven steps from 50 (very light) to 950 (very dark). This generator builds such a scale from your brand color, with the color itself exactly on 500.
How it works
Pick your base color, give the palette a name and copy the code for tailwind.config.js or the @theme block for Tailwind v4.
Try the Tailwind Color Palette nowFAQ
- Does it work with Tailwind v4?
- Yes. The @theme export creates variables like --color-brand-500 in OKLCH, just like Tailwind v4 uses them. For older versions there is the tailwind.config.js export.
- Why is my color on 500?
- Step 500 is the main color in Tailwind. The lighter and darker steps follow a lightness curve modeled on well-known UI palettes.
- Why are the ends less saturated?
- Very light and very dark colors quickly look garish or muddy at full saturation. The slider sets how much the saturation drops.
- What does OKLCH mean?
- OKLCH describes colors by lightness, chroma and hue the way the eye perceives them. Modern browsers understand OKLCH directly in CSS.
Ready-made color palettes
More than 30 palettes by mood, with HEX, RGB and OKLCH values to copy.
Browse the palette collectionRelated generators
All generators in Colors
Tints & Shades
Lighter and darker steps of a color. Export as HEX, RGB, HSL or CSS variables.
Open in editor
Palette from Image
Drop in a photo and get its main colors with their share in percent. The image stays in your browser.
Open in editor