Color Palette Generator
Generate shades, tints and color harmonies from any base color.
Pick a base color to instantly build a monochromatic shade-and-tint scale plus complementary, analogous, triadic and tetradic harmonies. Copy any HEX with one click. Everything runs in your browser.
Screen color picker isn't supported in this browser — use the picker or paste a HEX code.
#2563ebrgb(37, 99, 235)hsl(221, 83%, 53%)Tap any swatch to set it as the base color.
#8d51a5Pick a base color with the swatch picker, the eyedropper, or by typing a HEX, RGB, or HSL value, then scroll down to see the shade-and-tint scale along with the complementary, analogous, triadic, and tetradic harmony rows built instantly from it. Click any swatch to copy its HEX code to your clipboard.
Formula & methodology
Shades vary lightness at a fixed hue and saturation. Harmonies rotate the hue on the color wheel: complementary 180°, analogous ±30°, triadic 120°, tetradic 90°.
Worked example
- #2563eb → Blue scale + complementary orange and triadic set
Frequently asked questions
What is a color harmony?
A set of colors with a fixed relationship on the color wheel (such as complementary or triadic) that tend to look balanced together.
What's the difference between complementary and analogous colors?
Complementary colors sit opposite each other on the wheel and create high contrast, good for buttons or accents that need to stand out. Analogous colors sit next to each other and feel calm and harmonious, good for backgrounds or gradients.
When should I use a triadic or tetradic scheme?
Triadic uses three evenly spaced hues for a vibrant look that still feels balanced. Tetradic uses two complementary pairs for the widest variety of color, but works best when one hue leads and the others act as accents.
Can I copy a color code directly from the palette?
Yes. Click any swatch in the shade, tint, or harmony rows to copy its HEX code to your clipboard instantly.
Does this tool save my palette?
No. Everything runs locally in your browser and nothing is saved or uploaded, so copy the codes you want or take a screenshot before you close the page.
Privacy
All processing happens locally in your browser. Your data is never uploaded.