Tool 013 / design / free / runs locally
Color Palette Generator
Pick any starting color and generate matching palettes based on classic color-wheel relationships: complementary, triadic, and analogous. Click any swatch to copy its hex value to the clipboard.
Complementary
Triadic
Analogous
How it works
Pick a base color and this tool builds three classic harmonies from it: complementary, triadic, and analogous. It converts your hex value to HSL (hue, saturation, lightness), rotates the hue around the 360-degree color wheel by fixed angles, and converts back to hex. Complementary uses the opposite hue (180 degrees), triadic uses two hues 120 degrees apart, and analogous uses neighbours 30 degrees to each side.
Working in HSL is what makes the palettes look balanced: rotating only the hue keeps saturation and lightness constant, so every swatch shares the same vividness and brightness as your base. That is why the results feel like a coordinated set rather than random colors. Click any swatch to copy its hex code.
All math runs in your browser. Hex values are normalised to uppercase six-digit form, and the base color itself appears inside each harmony so you can always see how the others relate to your starting point.
How to use it
- Pick a base color with the color picker, or type a hex value like #4F8CFF.
- Look at the three generated harmonies: complementary, triadic, and analogous.
- Click any swatch to copy its hex code to your clipboard.
- Adjust the base color and the palettes update instantly.
Worked examples
Input: #4F8CFF (a blue)
Output: Complementary pairs it with an orange near #FFC24F; triadic adds a magenta and a green; analogous gives two nearby blues.
All four sets keep the same saturation and lightness as the base.
Input: #FF0000 (pure red)
Output: Complementary is cyan (#00FFFF), triadic adds green and blue, analogous gives orange-red and pink-red.
Opposite on the wheel from red is cyan.
Edge cases and limits
- Input must be a full six-digit hex (#RRGGBB). Three-digit shorthand like #FFF and named colors are not accepted and show an Invalid hex message.
- Hue rotation can land on a value that rounds to the same hex when saturation is very low (near grey), so a near-grey base produces near-identical swatches.
- These are hue-based harmonies, not accessibility-checked pairs. The tool does not test contrast ratios for text legibility.
Common mistakes
- Typing a hex without the leading hash or with only three digits. Use the full #RRGGBB form.
- Expecting tints and shades. This rotates hue; it does not generate lighter or darker variations of one color.
- Assuming a complementary pair is automatically readable as text on background. Always check contrast separately.
Frequently asked questions
What's the difference between complementary and triadic palettes?+
Complementary uses two colors directly opposite each other on the color wheel (high contrast). Triadic uses three colors evenly spaced 120 degrees apart for a more balanced feel.
When should I use analogous colors?+
Analogous palettes (3 colors next to each other on the wheel) feel harmonious and calm. They're great for UI backgrounds, gradients, and serene illustrations.
Can I save my palettes?+
Right now you copy the hex codes directly. We're planning a 'save to local browser' feature in a future wave. Your palettes will stay on your device, never on a server.
Related tools
More Design tools that run entirely in your browser.