Color tools
Palette Generator
Generate practical palettes from a base color: a lightness scale (shades & tints) plus a few harmony options. Built to support our color guesser and wheel intuition.
Base color (HEX)
Tip: use Color Converter to normalize formats.
Preview
Base
Shades & tints (lightness scale)
Click to copy
Complementary
Click to copy
Analogous
Click to copy
Triadic
Click to copy
Split-complementary
Click to copy
How to use this palette generator
Start with a base HEX color. The tool derives an HSL wheel representation so it can generate consistent hue rotations (for harmony) and lightness steps (for shades/tints).
For product UI, the lightness scale often matters more than fancy harmony: it gives you consistent hover, pressed, and disabled variants.
If you need exact conversions, use Color Converter alongside this page.
FAQ
- What does a palette generator do?
- A palette generator builds a small set of related colors from a single base color — useful for UI states, illustrations, and learning how hue and lightness interact.
- Are these palettes “perfect”?
- No single palette fits every brand or screen. Use these as fast starting points, then adjust by eye for your context.
- How should I use the results?
- Try using the lightness scale for hover/active states, and the harmony options when you want an accent or secondary color that still feels connected.