Color Palette Generator
Build harmonious color schemes from one base color.
#63adf1#6366f1#a763f1How to use the Color Palette Generator
- 1 Pick a base color with the swatch or type a hex code.
- 2 Choose a harmony: complementary, analogous, triadic, tetradic or monochromatic.
- 3 Copy individual hex codes, or hit “Random base” to explore new schemes.
Examples
- ▸ Finding accent colors that pair well with a brand primary.
- ▸ Building a five-shade monochromatic scale for a UI.
Frequently asked questions
What is a color harmony?
Harmonies are relationships on the color wheel that look pleasing together. Complementary uses opposite hues, analogous uses neighbors, and triadic spaces three hues evenly around the wheel.
Which scheme should I use for a website?
Analogous or monochromatic schemes feel calm and cohesive for backgrounds and UI, while a complementary accent gives buttons and calls-to-action contrast that draws the eye.
Can I check if the colors are accessible?
Yes — copy any two hex codes into the contrast checker to confirm text and background combinations meet WCAG AA or AAA.
Related tools
WCAG Color Contrast Checker
Test text vs. background contrast for accessibility.
CSS Gradient Generator
Design CSS gradients and copy the code.
Color Converter
Convert HEX, RGB and HSL with live preview.
CSS Box Shadow Generator
Build CSS box shadows and copy the code.
Image Color Picker
Eyedrop any pixel to get its hex and RGB code.