Quick answer
What is Palette Studio?
Generate shareable color palettes for websites, branding, UI systems, social graphics, and product launches with lock and reroll controls, WCAG contrast checks, and production-ready exports.
Lock colours, reroll the rest with spacebar, check WCAG contrast, and export production-ready CSS variables, Tailwind config, or SCSS.
Swatches
5
Exports
3
Contrast
WCAG
Shortcut: press Space to reroll unlocked swatches.
Swatch 1
Best text: #FFFFFF
Swatch 2
Best text: #FFFFFF
Swatch 3
Best text: #000000
Swatch 4
Best text: #000000
Swatch 5
Best text: #FFFFFF
:root {
--palette-1: #4f46e5;
--palette-2: #7c3aed;
--palette-3: #f97316;
--palette-4: #fef3c7;
--palette-5: #111827;
}Quick answer
Generate shareable color palettes for websites, branding, UI systems, social graphics, and product launches with lock and reroll controls, WCAG contrast checks, and production-ready exports.
Guide
Generate shareable color palettes for websites, branding, UI systems, social graphics, and product launches with lock and reroll controls, WCAG contrast checks, and production-ready exports.
Use Palette Studio like a fast creative workspace: lock the colours you love, press spacebar to reroll the rest, edit HEX values directly, and share the exact palette through the URL.
Every adjacent colour pair is checked with real WCAG contrast math so designers and developers can spot accessible AA, AAA, large-text, and failing combinations before exporting.
Copy CSS variables, Tailwind config colours, or SCSS variables instantly. You can also download the palette as JSON for handoff, documentation, or future tooling.
Palette links keep the selected colours in the query string, making it easy to share colour directions with clients, teammates, communities, and design-tool roundups.
Related tools
Jump into the next useful tool with a quick dock-style shortcut.
Color
Color
Color
Questions, answered
Quick answers to the most common questions about using this tool in real browser workflows.
Still need help? Contact us