Color Palette Generator

A complementary color scheme uses colors that are opposite each other on the color wheel. This creates a high contrast, vibrant look that is great for highlighting important UI elements like buttons.

Analogous color schemes use colors that are next to each other on the color wheel. They usually match well and create serene and comfortable designs, often found in nature.

Select the "CSS Vars" export option, click copy, and paste the code into your stylesheet (usually inside a :root {} selector). You can then use those variables throughout your CSS like background-color: var(--color-primary);.

A monochrome (or monochromatic) scheme takes a single base color and creates a palette by altering only its lightness and saturation. This guarantees the colors will match perfectly and creates a very clean, unified look.

A triadic scheme uses three colors that are evenly spaced around the color wheel (forming a triangle). It provides high contrast while maintaining better visual harmony than a strict complementary scheme.

The tool converts your HEX or RGB base color into the HSL (Hue, Saturation, Lightness) color space. It then mathematically rotates the Hue degree (e.g., +180 for complementary) to find the mathematically perfect matching colors.

JSON is the standard data format for configuring modern styling frameworks like Tailwind CSS, Material-UI, or styled-components. Exporting to JSON allows you to paste the palette directly into your config files.

Yes! If you are stuck for inspiration, click the "Generate Random" button. The tool will pick a random base color and instantly apply the selected generation rule.

Changing the lightness allows you to create pastel palettes (higher lightness) or deep, dark palettes (lower lightness) without changing the fundamental color harmony.

Absolutely. Any color palette you generate using this tool is completely free to use for both personal and commercial projects without attribution.