Color Palette Generator
Generate harmonious color palettes from one base color — monochromatic, analogous, complementary, triadic and tints & shades. Click any swatch to copy its HEX value.
How to use
- Pick a base color in the color picker, or type a hex value such as #4f46e5 or #345 into the text box.
- Five palettes are generated around your base color: monochromatic, analogous, complementary, triadic, plus tints & shades.
- Click any swatch to copy its HEX value to the clipboard — the value is shown right inside the swatch.
- To grab everything at once, click "Copy all HEX values" — one color per line, ready to paste into design docs or code.
- Monochromatic keeps hue and saturation while shifting lightness; tints & shades instead mix the base color toward pure white and black.
FAQ
What do the five palette types mean?
Monochromatic varies only the lightness of your base color. Analogous takes colors within about 30° on the color wheel for a soft, harmonious look. Complementary is the color opposite your base for strong contrast. Triadic uses three colors spaced 120° apart. Tints & shades gradually mixes your color with white and black.
How are the generated colors calculated?
The tool first converts HEX to the HSL model: analogous and complementary palettes rotate the hue angle, monochromatic shifts lightness, and tints & shades blend the color linearly toward white or black. Everything is then converted back to HEX for display.
Why is my entered color not recognized?
Use a 3- or 6-digit hex format such as #4f46e5, #fff or plain 4f46e5 — the leading # is optional. 8-digit values with alpha (e.g. #RRGGBBAA) are not supported.
Where can I use the copied values?
HEX is the universal color notation for the web and design tools. Paste it directly into CSS (color, background), Figma or the Photoshop color picker with no conversion needed.