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.
Try other harmony rules in the main color palette generator, or send colors to the gradient generator and WCAG contrast checker.