Color Palette Generator
Generate harmonious color palettes and export as CSS or Tailwind config. Free, fast, and runs 100% in your browser.
Great design starts with a cohesive color palette. This generator creates harmonious color schemes based on color theory — complementary, analogous, triadic, and split-complementary. Enter a base color and explore mathematically balanced combinations. Export palettes as HEX codes ready for your CSS, Figma, or Sketch projects.
rgb(59, 223, 246)
hsl(187, 91%, 60%)
rgb(59, 130, 246)
hsl(217, 91%, 60%)
rgb(82, 59, 246)
hsl(247, 91%, 60%)
rgb(175, 59, 246)
hsl(277, 91%, 60%)
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 |
|---|---|
| Complementary | ✓ |
| Analogous | ✓ |
| Triadic | ✓ |
| HEX export | ✓ |
| Privacy | 100% client-side |
Frequently Asked Questions
What color harmonies are available?
Complementary, analogous, triadic, split-complementary, and monochromatic palettes — all based on color wheel relationships.
Can I start from a brand color?
Yes. Enter your brand's primary HEX color and generate a full palette that harmonizes with it.
How do I use the palette in CSS?
Each color is shown as a HEX code. Click to copy and paste directly into your CSS variables or design tokens.