Color Palette Generator

Create beautiful color schemes, verify WCAG readability compliance, and export CSS code.

#6366F1

#8B5CF6

#EC4899

#F43F5E

#E11D48

WCAG Contrast Checker

Text Color

Background

This is a demonstration of Contrast

Make sure it is readable for AA/AAA standards

Contrast Ratio4.47 : 1

Normal Text:AA FAIL

Large Text:AAA FAIL

Export Palette

Export your hex colors directly into your developer templates or configuration layouts.

Detailed Guide: Understanding Web Color Theories

Color plays an essential role in how humans experience digital interfaces. Proper color palettes direct focus, evoke emotional reactions, and satisfy accessibility constraints.

Harmonic Archetypes:

Monochromatic: Uses varying shades, tones, and tints of a single hue. Creates clean, highly aligned designs.
Analogous: Combines colors that sit next to each other on the wheel. Highly relaxing for the eyes.
Complementary: Pairs opposing colors (e.g. blue and orange) for high contrast and impact.
Triadic: Utilizes three colors equidistant on the color wheel, perfect for playful interfaces.

WCAG 2.1 Contrast Standards:

Relative luminance determines how readable foreground text is over background styling. Poor contrast ratios are the #1 web accessibility issue. Satisfying WCAG AA standards ensures your application is readable for individuals with visual impairments.

How to Use Color Palette Generator

Generate Palette

Press the Spacebar or click the Generate button to rotate colors. Lock colors you want to keep.

Check Accessibility

Use the WCAG tool below to test contrast ratios between your selected colors for readability compliance.

Export Code

Click the Export buttons to copy variables in CSS, Tailwind config, or raw JSON formats.

Frequently Asked Questions

How do I choose colors that are accessible?

Use our contrast checker. The WCAG AA standard requires a contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text. AAA requires 7:1 for normal text. Keeping contrast high ensures readability.

What does 'locking' a color do?

When you lock a color block, it stays constant when you press Spacebar or click Generate. This allows you to build a cohesive color scheme around a fixed base color.

What are analogous and triadic colors?

Analogous colors are located adjacent to each other on the color wheel (creating calm designs). Triadic colors are spaced equally around the color wheel (creating vibrant, high-energy designs).