Color Wheel, Gradients & WCAG Contrast
Build color harmonies on an interactive wheel, create linear, radial and mesh gradients, and check WCAG 2.2 text contrast, all locally in your browser.
The interactive tool loads here when JavaScript is enabled. Files are processed locally in your browser.
How to use Color Wheel, Gradients & WCAG Contrast
- Click anywhere on the wheel, or drag, to pick a base hue and saturation; adjust lightness with the slider.
- Choose a harmony type — analogous, triadic, complementary, split-complementary or monochromatic — to see matching colors.
- Send a harmony to your working palette, or build a linear, radial or 4-point mesh gradient and copy its CSS.
- Enter a text and background color to check WCAG 2.2 contrast, then use Auto-fix contrast if a check fails.
Features
- An interactive colour wheel with analogous, triadic, complementary, split-complementary and monochromatic harmonies.
- Linear, radial and four-point mesh gradients with copyable CSS.
- WCAG 2.2 contrast checks with an automatic fix suggestion.
- Send harmonies straight to your working palette.
Supported formats and limitations
Output: CSS gradient code and colours added to your palette.
- Mesh gradients are approximated with layered CSS radial gradients.
Frequently asked questions
Does this tool upload any colors or send data to a server?
No. The color wheel, gradient builder and contrast analyzer all run their calculations locally in your browser.
What does Auto-fix contrast change?
It adjusts the text color's lightness until it passes the AA contrast threshold against your chosen background, keeping the hue as close as possible to your original choice.
Which WCAG levels are checked?
The analyzer checks AA and AAA, for both normal and large text, using the WCAG 2.2 contrast ratio formula.