About the Handiwork Color Palette Generator
The Color Palette Generator turns one base color into a coordinated set using established color-wheel relationships. Explore complementary, analogous, triadic, tetradic, monochromatic, and tint-and-shade schemes, then copy individual swatches or the entire palette as hex codes.
How to use the Handiwork Color Palette Generator
- Pick a base color with the swatch or enter a hex code.
- Choose a color harmony to generate a coordinated palette.
- Click a swatch to copy one hex code, or copy the complete set.
Color harmonies explained
Color harmonies are relationships on the color wheel that look pleasing together. Complementary pairs opposites for high contrast, analogous uses neighbors for a calm look, triadic and tetradic spread colors evenly for vibrant balance, and monochromatic or tint/shade schemes vary the lightness of a single hue for subtle, cohesive designs.
Choosing a palette for a real interface
A generated harmony is a starting point, not a complete design system. Assign colors by role, such as background, surface, text, accent, and feedback, then test the exact foreground and background pairs for readable contrast. Tints and shades can help create hierarchy without introducing unrelated hues.
The exact hue math behind each harmony
Every harmony works in HSL and rotates the base color’s hue by a fixed angle while keeping its saturation and lightness: complementary adds 180°, analogous adds and subtracts 30°, triadic adds 120° and 240°, and tetradic adds 90°, 180°, and 270°. Because only the hue changes, every generated color shares the same saturation and lightness as your base color.
Monochromatic vs. tints & shades
Both vary lightness at a single hue, but differently: Monochromatic keeps your base color’s own lightness as the middle swatch and spreads four more around it (85%, 70%, your base, 35%, 20%). Tints & shades ignores the base lightness and always outputs the same five fixed steps (90%, 70%, 50%, 30%, 15%), which gives a more predictable, evenly spread range regardless of how light or dark your starting color is.
Continue this workflow
Use the adjacent tool when the next step calls for a different input, output, or method.
Assumptions and limitations
- Harmonies are generated purely from hue, saturation, and lightness math — they do not check the resulting colors for accessible contrast against each other or against text.
- Saturation and lightness are inherited unchanged from the base color for every harmony except monochromatic and tints & shades, so an already low-saturation base produces a muted palette even for "vibrant" schemes like triadic.
- The color-wheel relationships used here (equal hue spacing in HSL) are a common simplification, not a perceptually uniform color model — some generated pairs can look less evenly contrasted than the math suggests.
Sources and standards
These authoritative references were used to verify the method and guidance on this page.
Frequently asked questions
What color formats can I copy?
Each swatch copies as an uppercase hex code. You can also copy the full palette as one hex code per line.
Which color harmonies are supported?
Complementary, analogous, triadic, tetradic, monochromatic, and tints & shades — generated instantly from your chosen base color.
Can I start with a three-digit hex color?
Yes. Both three-digit values such as #FFF and six-digit values such as #FFFFFF are accepted as the base color.