Color palette generator
Pick a base color and get a harmonious palette, complementary, analogous, or triadic. Copy hex codes in one click.
How color harmony works
Color theory divides the color wheel into relationships that the human eye finds naturally pleasing. A complementary palette uses colors directly opposite each other on the wheel, creating maximum contrast and visual energy, ideal for calls-to-action and bold brand identities. Analogous palettes draw from neighboring colors, producing a serene, cohesive feel often used in nature-inspired or wellness brands.
Triadic palettes use three equally spaced colors (120° apart), giving vibrancy while maintaining balance, popular for children's products and creative agencies. Monochromatic palettes explore a single hue at different lightness levels, creating sophistication and focus, and are excellent for minimalist UI design.
This tool converts your chosen hex color to HSL (Hue, Saturation, Lightness), rotates the hue angle according to the selected harmony, and converts back to hex. All calculations happen in your browser, no server call, no data stored. Click any swatch hex code to copy it to your clipboard instantly for use in Figma, CSS, or any design tool.
Using your palette effectively
- Use the lightest shade as your page background.
- Reserve your base color for primary buttons and links.
- Use the darkest shade for body text to ensure contrast.
- Check WCAG contrast ratios (minimum 4.5:1 for normal text).
Frequently asked questions
What format are the colors in?
All colors are output as 6-character hex codes (e.g. #ff5a1f), which are universally accepted in CSS, design tools, and print workflows.
How do I copy a color?
Click the hex code button below the swatch. It copies the code to your clipboard automatically (requires a modern browser).
Can I generate CMYK values for print?
Not yet, this tool outputs hex and HSL. For print work, paste the hex code into your design software's color picker to get CMYK equivalents.