Color Palette Generator & Contrast Checker
Generate color palettes from a seed color, and check WCAG contrast ratios for accessible text.
Palette generator
WCAG contrast checker
How to use this tool
Pick a seed color to generate complementary, analogous, triadic, and monochromatic palettes — click any swatch to copy its hex code. Below that, pick a text and background color to see the live WCAG contrast ratio and which accessibility levels it passes.
About this tool
Contrast math follows the official WCAG 2.x relative luminance and contrast ratio formulas, checked against well-known published reference values before publishing (black/white = 21:1 exactly, #767676/white ≈ 4.54:1). Palettes are generated with standard HSL hue-rotation color theory (complementary = +180°, analogous = ±30°, triadic = +120°/+240°, monochromatic = same hue at different lightness levels).
100% client-side.
Frequently asked questions
How is the contrast ratio calculated?
Using the official WCAG 2.x relative luminance and contrast ratio formulas. This tool's implementation was checked against well-known published reference values before publishing: black on white gives exactly 21:1, identical colors give 1:1, and #767676 on white gives about 4.54:1 (a commonly cited borderline-AA gray).
What do AA and AAA mean?
They are WCAG 2.x conformance levels for text contrast. AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold). AAA is stricter: 7:1 for normal text and 4.5:1 for large text.