Color Palette Generator

Generate harmonious color schemes with WCAG accessibility checks

Configuration

Complementary Palette

Blue#4a90e2rgb(74, 144, 226)
Orange#e29b4brgb(226, 155, 75)

Accessibility Check (WCAG)

Contrast Ratio:1.41:1
Normal Text AA4.5:1 required
Normal Text AAA7:1 required
Large Text AA3:1 required
Large Text AAA4.5:1 required

Sample Text

Heading Example

Color Harmony Types

Complementary

Colors opposite on the wheel - high contrast, vibrant look

Analogous

Adjacent colors - harmonious, serene feeling

Triadic

Three evenly spaced colors - balanced, vibrant

Monochromatic

Variations of one color - clean, elegant look

Best Practices

  • Use 60-30-10 rule: 60% dominant color, 30% secondary, 10% accent
  • Ensure sufficient contrast for text readability (WCAG AA minimum)
  • Test your palette on different screens and in various lighting conditions
  • Consider color blindness - test with accessibility tools
  • Limit your palette to 3-5 colors for consistency
  • Document your color system with variables (CSS custom properties)