Add your input
A base color and palette style.
Design bench
Color palette generator
Explore usable tints and companion colors, then copy the values you like.
Privacy built inYour work stays with you
Select any swatch to copy its HEX value.
Your work stays private in your browser while you use this tool.
What does color palette generator do?
Turn one seed HEX color into six lighter and darker RGB-mixed tones plus an HSL complement, then copy individual swatches or a seven-variable :root block.
- Input
- A base color and palette style.
- Result
- A set of copy-ready HEX swatches.
- Price
- Free
- Account
- Not required
How to use color palette generator
Choose your settings
Explore usable tints and companion colors, then copy the values you like.
Save or copy
A set of copy-ready HEX swatches.
A practical tip
Choose one dominant color and use the remaining swatches as supporting accents.
When to use color palette generator
Draft a compact token ramp for a prototype without naming every shade by hand.
Find a complementary accent to test beside an existing brand color.
Copy a set of CSS custom properties as a starting point for states, borders, and surfaces.
Worked example
A concrete color palette generator example
- Input
- Seed color #0EA5E9
- Result
- The seven swatches are #D8F1FB, #A3DDF7, #62C5F1, #0EA5E9, #0B84BA, #086087, and complement #E9520E. The copied CSS names them --palette-1 through --palette-7.
What to expect
How it works
Three tints linearly mix the seed's encoded RGB channels toward white, two shades mix toward black, and the complement rotates the seed's HSL hue by 180 degrees while retaining saturation and lightness. Swatch labels choose dark or light text from relative luminance.
Know before using
Limits and edge cases
- The ramp is a simple encoded-sRGB interpolation, not a perceptually uniform OKLCH scale; neighboring tones may therefore feel uneven.
- Generated swatches are not automatically checked for text contrast, color-vision distinctions, brand suitability, or print gamut.
Standards and sources
Common questions
Color palette generator FAQ
Is color palette generator free to use?
Yes. Color palette generator is free to use.
Does color palette generator keep my work private?
Yes. Your work stays private while you use the tool — nothing you enter is uploaded.
How is the final complement chosen?
The seed is converted to HSL and its hue is rotated exactly 180 degrees. Saturation and lightness remain the same before conversion back to HEX.
Are the seven tones a standard design-system scale?
No. They are predictably numbered convenience values, not Tailwind, Material, or another framework's calibrated scale. Rename and validate them for your own token system.