Color Theme Generator
Create beautiful, accessible color themes for your projects
Generate color palettes, check accessibility contrast, and export to CSS, Tailwind CSS, and other formats. Perfect for web designers and developers creating consistent color schemes.
Color Sets
Primary
.primary-*
Secondary
.secondary-*
Accent
.accent-*
Color sets generate utility classes like .bg-primary-500, .text-secondary-600, etc.
Color Harmony
Color Harmony
Complementary
Opposite colors on the color wheel
2 colors
Analogous
Adjacent colors on the color wheel
3 colors
Triadic
Three colors equally spaced on the color wheel
3 colors
Tetradic
Four colors forming a rectangle on the color wheel
4 colors
Tip: Click on any color swatch to use it as your primary color. Each harmony type creates different color relationships that work well together.
Accessibility Check
Primary on Background
Contrast: 3.48:1
AA Large
Text on Background
Contrast: 13.38:1
AAA
Live Preview
Sample Heading
This is sample text to preview your color theme.
Primary
Secondary
Accent
Card Title
Card content with secondary information
Another Card
More preview content
Color Palette
Primary Color Tones
50
100
200
300
400
500
600
700
800
900
950
Secondary Color Tones
50
100
200
300
400
500
600
700
800
900
950
Accent Color Tones
50
100
200
300
400
500
600
700
800
900
950