Complementary Palette Generator
Complementary colors sit opposite on the color wheel. This generator adds lighter and darker steps so you get a full five-swatch palette, not just a pair.
:root {
--color-1: #6D39AC;
--color-2: #78AC39;
--color-3: #9575BD;
--color-4: #9DBD75;
--color-5: #4B3960;
}Color tools
More free color tools
Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.
- CSS Gradient Generator
Build linear, radial, and conic CSS gradients with live preview. Copy production-ready code instantly.
- WCAG Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA. Includes palette matrix mode and auto-fix suggestions.
- Tint & Shade Generator
Turn one brand color into a Tailwind-compatible 50–950 scale with WCAG contrast badges on every swatch.
- Palette from Image
Extract dominant colors from any photo — runs entirely in your browser. Send colors to converters or palette tools.
- Color Blindness Simulator
Preview palettes as seen with protanopia, deuteranopia, or tritanopia. Essential for accessible design.
- Interactive Color Wheel
Drag to pick a hue and see complementary, triadic, and analogous harmonies live — with HEX, RGB, and CMYK values.
- Print Gamut Checker
See exactly how a screen color shifts when printed in CMYK. Side-by-side press preview with shift warnings.
- Compare Colors (Delta E)
Measure the perceptual difference between two colors with ΔE2000 — plus HEX, RGB, CMYK, and HSL values for both.
- Random Color Generator
Generate a random HEX color, a lockable five-color palette, or a two-color CSS linear gradient. Copy HEX, RGB, HSL, and CMYK.
Try other harmony rules in the main color palette generator, or send colors to the gradient generator and WCAG contrast checker.