Loading tools
Loading tool
7 harmonies, WCAG audit, image extract, 6 export formats.
Three adjacent hues, harmonious. • Space = regenerate unlocked
:root {
--color-1: #3b82f6;
--color-2: #8b5cf6;
--color-3: #ec4899;
--color-4: #f59e0b;
--color-5: #10b981;
}A palette generator builds 5-color schemes from a base color using 7 color-theory harmonies (monochrome, complementary, analogous, triadic, tetradic, split-complementary, shades). This one also extracts colors from uploaded images and validates every pair against WCAG 2.1 contrast requirements (AA and AAA, normal + large text).
Most palette tools focus on aesthetics. This one ships a one-click WCAG audit, so a palette that looks great visually also passes accessibility before it ships. Exports CSS variables, Tailwind config (v3 + v4 with OKLCH), SCSS, JSON design tokens, SVG swatches, and Figma Tokens Studio format.
Yes. Unlimited use, no signup. Coolors charges $3-12/month for unlimited palettes + image extract; Adobe Color is free but locked into Creative Cloud sync. This one runs entirely in your browser.
Seven: Monochrome (single hue, varying lightness), Complementary (base + opposite), Analogous (three adjacent hues), Triadic (three hues 120° apart), Tetradic (four hues 90° apart), Split-complementary, and Shades (Tailwind-style 50→950 ramp).
Yes. Drop a PNG, JPG, or WebP and we extract the dominant 5 colors via histogram quantization. Runs in browser -your image never leaves your device.
Yes. Every swatch shows its contrast against black and white, plus AA / AAA / Fail badges for normal (4.5:1, 7:1) and large text (3:1, 4.5:1). Pick combos that pass for accessible UI.
Six: CSS custom properties (--color-1), Tailwind config snippet, SCSS variables, JSON (design-token shape), SVG swatch strip, and Figma Tokens Studio format. One-click copy each.
Yes. The Tailwind export includes both v3 (tailwind.config.js extend) and v4 (@theme inline) shapes. OKLCH preview is included for v4 users.
WCAG 2.1 contrast standard. AA: 4.5:1 for normal text, 3:1 for large (18pt+). AAA: 7:1 normal, 4.5:1 large. AA is the legal minimum (ADA, EAA); AAA is the gold standard.
Yes. Click the lock icon on any swatch; press space or click Generate to regenerate only the unlocked ones. Same Coolors flow, no signup.
Yes. Math + image processing run in your browser. Uploaded images, color values, exported palettes all stay on your device.
Use the export buttons (CSS / Tailwind / JSON / SVG) to download. No accounts means no saved-palette gallery, but the JSON export is the standard exchange format for design tokens -import into Style Dictionary, Figma Tokens, or your own design system.
7 harmonies, image extract, WCAG audit, 6 export formats. Free unlimited.
Open the generatorThe Color Palette Generator page is built, reviewed, and maintained by the Molixa team. We use the tool we ship and update the docs when the behavior changes.