Color Palette Generator
Generate a simple palette of lighter and darker shades from one base color.
Light and dark shade ramp
HEX-first workflow
Useful for design and frontend handoff
Base color
Start from one HEX value and build a usable shade ramp.
Palette
Useful for token exploration and quick frontend handoff.
50#E9F1FD
100#C9DCFA
200#9DC0F6
300#71A5F1
400#4689ED
500#2574EA
600#2166CE
700#1C58B2
800#174891
900#123870
Common use cases
- Expanding a brand color into UI shades
- Building starter design tokens
- Testing color systems before formal design work
FAQ
Does this make a full design system automatically?
No. It generates a practical shade ramp around one base color to speed up exploration and handoff work.
Can I use short HEX values here?
Yes. Short HEX values are normalized automatically before the palette is built.
More guides