Color Palette Generator
Generate harmonious color palettes from a base color. Export as HEX codes or CSS custom properties.
#6467f2
#f26467
#67f264
How to Use
- Pick your base color using the color picker or type a HEX code directly into the input field.
- Select a color scheme type — Triadic, Complementary, Analogous, and more. The palette updates instantly based on color theory relationships.
- Click Copy next to any swatch to copy that HEX value, or click Export CSS Variables to copy all colors as CSS custom properties (
--color-1,--color-2, etc.).
Frequently Asked Questions
- What is a complementary color scheme?
- Complementary colors sit directly opposite each other on the color wheel (180° apart). They create high contrast and vibrant visual tension, ideal for calls-to-action or accent highlights.
- What is a triadic color scheme?
- A triadic scheme uses three colors spaced equally around the color wheel (120° apart). It offers a balanced, vibrant palette while maintaining variety.
- What does "analogous" mean in color theory?
- Analogous colors are adjacent on the color wheel (within 30°). They create harmonious, natural-looking palettes often found in nature — great for backgrounds and calm designs.
- Can I use the exported CSS variables in my project?
- Yes. Paste the exported <code>:root {"{"} --color-1: #hex; ... {"}"}</code> block into your CSS file and reference the variables anywhere in your styles.