Palette Studio

Architecting visual emotion through color science. Generate sophisticated, mathematically-balanced color schemes with WCAG contrast audits, color locking, and one-click export in 15+ formats.

7 Harmony Modes Color Locking WCAG Contrast 15+ Export Formats

Palette Architect

2 – Minimal 10 – Expanded
Press Space to shuffle • Click to lock a color

Distribution Audit

Click any swatch to copy its Hex code • Click format pills (RGB/HSL/CMYK) to copy individually

Gradient Studio

Click to expand

Direction / Type

CSS Code — click to copy

— generate palette to see gradient CSS —

The Science of Color Harmonies

How mathematical relationships between wavelengths create beauty — and how to use them in your designs.

Triadic Balance

Colors spaced 120° apart on the wheel create high-energy schemes that remain visually balanced and professional for branding.

Analogous Flow

Adjacent colors on the wheel are inherently pleasing as they mimic natural gradients found in sunsets, forests, and oceans.

Split-Complementary

A softer alternative to full complementary — uses the two colors adjacent to the direct complement for a vibrant yet balanced scheme.

Tetradic & Square

Four-color schemes built on 90° spacing offer rich variety. Best used by designating one dominant hue and using the rest as accents.

WCAG Contrast Audit

WCAG 2.1 requires a 4.5:1 contrast ratio for AA compliance and 7:1 for AAA. Our live badges let you instantly validate every swatch.

Browser-Local Processing

All color calculations and exports happen entirely in your browser. No palette data is ever sent to a server — your designs stay private.

Frequently Asked Questions

Clarifying technical inquiries about color spaces, harmony, and design workflows.

What is the difference between Triadic and Tetradic palettes?
Triadic uses 3 colors spaced 120° apart, giving high contrast and variety. Tetradic uses 4 colors at 90° intervals, offering even richer variety — but requires careful use of one dominant hue to avoid visual chaos.
What does WCAG AA and AAA mean?
WCAG (Web Content Accessibility Guidelines) sets contrast standards. AA (4.5:1 ratio) is the minimum for normal text and AAA (7:1) is enhanced. Using compliant colors ensures your design is readable by people with low vision or color blindness.
How do I use the Color Lock feature?
Click the lock icon () on any swatch to pin it in place. When you click "Regenerate" or press the spacebar, locked colors will stay while the others regenerate — perfect for building around a fixed brand color.
What formats can I export the palette in?
The Export & Share modal supports 15 formats: PDF, DOCX, TXT, Markdown, HTML, PNG, JPG, WebP, AVIF, SVG, CSV, XLSX, JSON, XML, and a ZIP bundle — all generated locally in your browser.
How many colors should a brand palette have?
Most professional brand guides use the 60-30-10 rule: 60% primary base, 30% secondary variant, and 10% accent color for high-visibility actions. A palette of 3–5 colors usually covers most design needs.
Is this tool free for commercial projects?
Yes, all tools on ApiTooler are free for personal and commercial use. Generate palettes for clients, products, or side projects — no licensing fees, no attribution required.