Color Palette Generator
Pick a base colour and get harmonies, tints, shades and a full tonal scale.
Complementary
Analogous
Triadic
Split complementary
Square
Monochromatic
Tonal scale (same hue, light → dark)
Frequently Asked Questions
What are colour harmonies?
Harmonies are colour relationships from the colour wheel: complementary colours sit opposite, analogous colours sit side by side, and triadic colours form an even triangle. They are proven combinations that look balanced together.
What is the difference between shades and tints?
Shades mix the colour with black to darken it; tints mix it with white to lighten it. The tonal scale shows both directions in even steps.
How do I use a palette in CSS?
Click any swatch to copy its hex value, or use the copy-all button to grab the whole harmony as a list of hex codes for your stylesheet or design tool.
Which harmony should I pick for a website?
Analogous palettes feel calm and cohesive, complementary palettes give strong contrast for calls to action, and monochromatic palettes are the safest for professional interfaces.
Related Tools
Color Code Converter
Convert between HEX, RGB, HSL, and other color formats.
Random Color Generator
Get a random colour with hex, RGB and HSL, plus a ready-made matching palette.
CSS Gradient Generator
Build linear or radial gradients with colour stops and copy the CSS instantly.
Image Color Picker
Pick colors from any image. Get HEX, RGB, and HSL values instantly.