AI Color Palette Generator

Generate beautiful, harmonious color palettes based on color theory. Export as CSS variables or Tailwind config.

Base Color

Harmony

#3ce0f6HSL(187, 91%, 60%)rgb(60, 224, 246)Click to copy

#3cb2f6HSL(202, 91%, 60%)rgb(60, 178, 246)Click to copy

#3c83f6HSL(217, 91%, 60%)rgb(60, 131, 246)Click to copy

#3c55f6HSL(232, 91%, 60%)rgb(60, 85, 246)Click to copy

#523cf6HSL(247, 91%, 60%)rgb(82, 60, 246)Click to copy

♿ Accessibility Contrast Ratios

vs White: 1.6:1

vs Black: 13.2:1

✅ AA

vs White: 2.4:1

vs Black: 8.9:1

✅ AA

vs White: 3.6:1

vs Black: 5.8:1

✅ AA

vs White: 5.5:1

vs Black: 3.8:1

✅ AA

vs White: 6.3:1

vs Black: 3.3:1

✅ AA

CSS Variables

:root {
  --color-1: #3ce0f6;
  --color-2: #3cb2f6;
  --color-3: #3c83f6;
  --color-4: #3c55f6;
  --color-5: #523cf6;
}

Tailwind Config

colors: {
  brand: {
    100: '#3ce0f6',
    200: '#3cb2f6',
    300: '#3c83f6',
    400: '#3c55f6',
    500: '#523cf6',
  }
}

Understanding Color Harmony

Color harmony is based on the color wheel. Different relationships between colors create different psychological effects.

🎨 Analogous

Colors next to each other on the wheel. Creates a harmonious, cohesive look. Best for calm, professional designs.

🔄 Complementary

Colors opposite each other. Creates high contrast and visual tension. Best for CTAs, buttons, and elements that need to stand out.

△ Triadic

Three equally-spaced colors. Creates a balanced, vibrant palette. Best for playful, creative designs.

Frequently Asked Questions

What WCAG contrast ratio do I need?

For AA compliance: 4.5:1 for normal text, 3:1 for large text. For AAA: 7:1 for normal text, 4.5:1 for large text. Our generator shows real-time contrast ratios against white and black.

How do I use CSS variables?

Copy the CSS output and paste it in your stylesheet. Then use var(--color-1) anywhere in your CSS. This makes it easy to update colors site-wide from one place.