Color Palette Generator

Generate harmonious color palettes with WCAG contrast checking

Base Color

HSL: 184° 100% 50%

#00F0FF

RGB: 0, 240, 255

HSL: 184°, 100%, 50%

Complementary

#00EEFF

184° 100% 50%

AA ✗AAA ✗

1.02:1

#006EFF

214° 100% 50%

AA ✗AAA ✗

3.19:1

#FF1100

4° 100% 50%

AA ✗AAA ✗

2.80:1

#FF9100

34° 100% 50%

AA ✗AAA ✗

1.60:1

#00FF91

154° 100% 50%

AA ✗AAA ✗

1.05:1

Analogous

#00FF11

124° 100% 50%

AA ✗AAA ✗

1.03:1

#00FF91

154° 100% 50%

AA ✗AAA ✗

1.05:1

#00EEFF

184° 100% 50%

AA ✗AAA ✗

1.02:1

#006EFF

214° 100% 50%

AA ✗AAA ✗

3.19:1

#1100FF

244° 100% 50%

AA ✓AAA ✗

6.04:1

Triadic

#00EEFF

184° 100% 50%

AA ✗AAA ✗

1.02:1

#4DF3FF

184° 100% 65%

AA ✗AAA ✗

1.05:1

#FF00EE

304° 100% 50%

AA ✗AAA ✗

2.30:1

#EEFF00

64° 100% 50%

AA ✗AAA ✗

1.27:1

#F3FF4D

64° 100% 65%

AA ✗AAA ✗

1.29:1

Split-Complementary

#00EEFF

184° 100% 50%

AA ✗AAA ✗

1.02:1

#4DF3FF

184° 100% 65%

AA ✗AAA ✗

1.05:1

#FF006F

334° 100% 50%

AA ✗AAA ✗

2.72:1

#FF9100

34° 100% 50%

AA ✗AAA ✗

1.60:1

#FF4133

4° 100% 60%

AA ✗AAA ✗

2.46:1

Monochromatic

#005F66

184° 100% 20%

AA ✓AAA ✗

5.27:1

#00A7B3

184° 100% 35%

AA ✗AAA ✗

2.08:1

#00EEFF

184° 100% 50%

AA ✗AAA ✗

1.02:1

#4DF3FF

184° 100% 65%

AA ✗AAA ✗

1.05:1

#99F8FF

184° 100% 80%

AA ✗AAA ✗

1.16:1

WCAG Contrast Reference

AA Normal Text: ≥ 4.5:1

AA Large Text: ≥ 3:1

AAA Normal Text: ≥ 7:1

AAA Large Text: ≥ 4.5:1

Contrast ratios shown are between the base color and each palette color.

What is a Color Palette Generator?

A color palette generator creates harmonious color combinations from a single base color using established color theory principles. It automatically computes complementary, analogous, triadic, split-complementary, and monochromatic palettes while checking WCAG contrast ratios for accessibility compliance.

How to Use This Color Palette Generator

Pick a base color using the color picker, hex input, or the random button
Five palette types are generated instantly — complementary, analogous, triadic, split-complementary, and monochromatic
Check the AA and AAA contrast badges to ensure text readability
Click any swatch to set it as the new base color for deeper exploration
Use the copy button to grab hex values for your design system or CSS

Common Use Cases

Designing accessible UI themes with verified contrast ratios
Building brand color systems from a single primary color
Quickly prototyping data visualization color schemes
Exploring color harmony options for marketing materials
Auditing existing palettes for WCAG compliance

Frequently Asked Questions

What do the AA and AAA badges mean?

These refer to WCAG 2.1 contrast requirements. AA requires a minimum 4.5:1 ratio for normal text and 3:1 for large text. AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. A green checkmark means the color pair passes that level.

What is the contrast ratio measured against?

The contrast ratio displayed on each swatch is calculated between the base color you selected and that specific palette color. This tells you whether text in one color would be readable on a background of the other.

Which palette type should I use?

It depends on your goal. Complementary palettes are bold and high-contrast. Analogous palettes feel cohesive and calm. Triadic palettes offer vibrant variety. Monochromatic palettes use a single hue for a unified, minimal look.