Website Color Scheme Generator

Generate complete color systems. Export to CSS, Tailwind, or JSON.

Brand Colors

Primary

Secondary

Accent

Warning

Dark

Preview

Website Heading

This is how your text will look.

CSS Variables

:root {
  --color-primary: #3B82F6;
  --color-secondary: #8B5CF6;
  --color-accent: #10B981;
  --color-warning: #F59E0B;
  --color-dark: #111827;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F9FAFB;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --color-success: #10B981;
  --color-error: #EF4444;
}

Tailwind Config

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        secondary: '#8B5CF6',
        accent: '#10B981',
        warning: '#F59E0B',
        dark: '#111827',
      }
    }
  }
}