Color Scheme Generator
Generate harmonious color palettes and export as CSS or Tailwind config. Free, fast, and runs 100% in your browser.
Building a cohesive color scheme from scratch is challenging. This generator uses color theory to create harmonious palettes — enter a base color and explore complementary, analogous, triadic, and split-complementary combinations.
Back to Tools
Color Palette Generator
Generate harmonious color palettes from a base color. Export as CSS variables or Tailwind config.
#3BDFF6
rgb(59, 223, 246)
hsl(187, 91%, 60%)
#3B82F6
rgb(59, 130, 246)
hsl(217, 91%, 60%)
#523BF6
rgb(82, 59, 246)
hsl(247, 91%, 60%)
#AF3BF6
rgb(175, 59, 246)
hsl(277, 91%, 60%)
#3BF6AF
rgb(59, 246, 175)
hsl(157, 91%, 60%)
:root {
--color-1: #3bdff6;
--color-2: #3b82f6;
--color-3: #523bf6;
--color-4: #af3bf6;
--color-5: #3bf6af;
--color-100: #e7effe;
--color-200: #b9d2fc;
--color-300: #8bb5fa;
--color-400: #5c97f8;
--color-500: #2e7af5;
--color-600: #0b5fe9;
--color-700: #094cbb;
--color-800: #06398d;
--color-900: #04275f;
--color-1000: #021431;
}"primary": {
"100": "#e7effe",
"200": "#b9d2fc",
"300": "#8bb5fa",
"400": "#5c97f8",
"500": "#2e7af5",
"600": "#0b5fe9",
"700": "#094cbb",
"800": "#06398d",
"900": "#04275f",
"950": "#021431"
}Feature Overview
| Feature | Details |
|---|---|
| Color theory | Mathematical |
| Multiple harmonies | 5 types |
| HEX export | ✓ |
| Privacy | 100% client-side |
Frequently Asked Questions
What is a complementary color?
The color directly opposite on the color wheel. Complementary pairs create high contrast and visual energy.
How do I choose a base color?
Start with your brand's primary color or pick a color that evokes the mood you want for your design.