Design
Palette generator
Build harmonies, tints and shades from a single base color.
Click a swatch to copy its hex.
Complementary
Analogous
Triadic
Tetradic
Monochromatic
Tints
Shades
How it works
1
Pick a base color
Enter a HEX value or choose one with the picker.
2
Explore harmonies
See complementary, analogous, triadic and other schemes, plus tints and shades.
3
Copy the swatches
Copy any color’s value straight into your design.
Frequent questions
What colour harmonies are included?
Complementary, analogous, triadic and similar schemes derived from color-wheel relationships, alongside lighter tints and darker shades of your base.
How do I use these in a design?
Use the base and its harmonies for primary and accent colors, and the tints and shades for hover states, backgrounds and borders.
Explore more tools
Colors
Convert colors between HEX, RGB and HSL.
Contrast checker
Check color contrast against WCAG AA/AAA.
Gradient generator
Build linear and radial CSS gradients.
Color mixer
Blend two colors and get the steps between.
Blob generator
Generate organic SVG blob shapes.
Color theme maker
Build a light/dark theme and export CSS variables.
Palette from image
Extract dominant colors from an image.
Color blindness simulator
Preview colors for different vision types.