Build a color system, then export it
Generate balanced five-color palettes, refine individual swatches, check practical contrast, and turn your favorite combinations into CSS gradients and copy-ready design tokens.
Workspace
Your files and inputs stay in this browser.
Core outputs
Palettes + gradients
Best for
Creators, developers, marketers, and anyone building a visual identity or web interface.
Output
Five editable colors, contrast information, CSS values, saved local palettes, and export-ready gradients.
Quick start
Get a useful result in minutes.
Choose a harmony and use Generate palette or press G outside a text field.
Lock swatches you want to retain, then regenerate only the remaining colors.
Select a swatch to edit and copy its HEX, RGB, HSL, or CSS variable value.
Build a gradient, test the selected foreground/background contrast, then export what you need.
Good to know
Built for practical work.
A no-account palette and gradient utility that combines practical HSL harmonies with transparent WCAG contrast checks.
More about color palette generator +
Generate color combinations with a clear starting point
Color harmony gives you a helpful way to explore related hues, rather than picking every swatch independently. This generator starts with classic hue-wheel relationships such as analogous, complementary, triadic, and tetradic. Adjust saturation and lightness to shift the overall mood, then lock the colors worth keeping.
Contrast is specific to the pair you use
A palette can look cohesive and still fail for text. Check the exact foreground and background pair in the contrast panel before using it for copy or controls. The displayed ratio is a WCAG contrast calculation, but accessibility also depends on typography, targets, content, and the wider interface.
Keep your palettes private
Generation, gradient exports, and saved palettes run locally in your browser. Saved palettes use local storage on the current device, so you can return to them without creating an account.
Questions
Before you start
Are generated palettes automatically accessible?+
No. Color harmony and accessibility are different. Use the contrast checker for the specific foreground and background pair you plan to use.
Where are saved palettes stored?+
Saved palettes use your browser's local storage. They stay on this device and are not sent to PromptEarn.
Can I use these colors in Tailwind?+
The tool can copy a practical colors object, but you should adapt it to the Tailwind version and configuration used in your project.
Why does the tool use HSL for harmony?+
HSL gives a lightweight, understandable hue-wheel model for classic harmony relationships. Colors are output as standard sRGB HEX values for web use.
Keep exploring
More tools for the same kind of work.
Guides