Generate harmonious color palettes instantly using color theory rules. Lock colors, adjust HSB, check WCAG accessibility, simulate color blindness, and export to CSS, JSON, or Tailwind — all free.
Built for designers, developers, and creators who demand precision, accessibility, and speed in their color workflows.
🎨
6 Harmony Rules
Generate palettes using Complementary, Analogous, Triadic, Tetradic, Split-Complementary, and Monochromatic color theory rules for visually balanced combinations.
🔒
Lock & Regenerate
Lock your favorite colors while shuffling the rest. Keep what you love, discover new complementary options for the remaining swatches instantly.
♿
WCAG Compliance
Every palette pair is tested against WCAG 2.1 AA and AAA contrast standards. See a live accessibility score and fix suggestions for failing combinations.
👁️
Color Blindness Sim
Preview your palette as seen by users with Protanopia, Deuteranopia, Tritanopia, and Achromatopsia. Ensure your designs work for all 8% of color vision deficient users.
📦
Multi-Format Export
Export to CSS custom properties, SCSS variables, Tailwind config, or JSON. One-click copy to clipboard or download as a file for any workflow.
🎛️
HSB & Temperature
Fine-tune with Hue rotation, Saturation, Brightness, and Temperature sliders. Adjust the color spread and see changes reflected across the entire palette in real time.
FAQ
Frequently Asked Questions
The generator supports 6 professional harmony rules: Complementary (opposite on the wheel), Analogous (adjacent colors), Triadic (3 equidistant), Tetradic/Square (4 equidistant), Split-Complementary (complement's neighbors), and Monochromatic (same hue, varied saturation/lightness). Each rule uses precise color theory mathematics to ensure harmonious results.
Yes. Click the lock icon on any swatch to lock it. Locked colors will remain fixed when you press Random, change the harmony rule, or adjust sliders. This is inspired by Coolors and lets you keep colors you love while exploring new combinations for the unlocked slots.
The tool computes the contrast ratio between every pair of colors in your palette using the WCAG 2.1 relative luminance formula. It scores each pair against AA (4.5:1 for normal text) and AAA (7:1 for normal text) thresholds. The accessibility score shows how many of the 10 possible pairs pass, helping you create inclusive designs.
Export your palette as CSS custom properties (--primary, --secondary, etc.), SCSS variables ($primary, $secondary), Tailwind CSS configuration (theme.extend.colors), or raw JSON array. Each format includes a one-click copy button, and the JSON option can be downloaded as a file for programmatic use in any design system or framework.
The tool applies transformation matrices that simulate four types of color vision deficiency: Protanopia (red-blind), Deuteranopia (green-blind, most common), Tritanopia (blue-blind), and Achromatopsia (total color blindness). These are based on the Brettel, Viénot, and Mollon (1997) color vision simulation algorithms used in professional accessibility testing.
No. All processing happens locally in your browser using JavaScript. Saved palettes are stored in your browser's localStorage only. No data is sent to any server, no cookies are used for tracking, and no analytics capture your palette choices. Your creative work stays completely private.