A color system explorer for designers who believe the right palette is the difference between good work and unforgettable work.
“Color is a power which directly influences the soul.”
— Wassily KandinskyColor Mélange isn’t a random color generator. It’s a curated collection of intentional palettes — each one balanced, tested across real interfaces, and designed to carry the weight of a full product. Switch a palette and watch every element respond. That’s the point: cohesion, not coincidence.
Every role — primary, accent, muted, destructive — exists for a reason. Together they form a system. Swap them in the sidebar and see your interface transform in real time.
The quick brown fox
jumps over the lazy dog
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk
Clear, versatile,
and always readable.
Designed for screens. 16px body, 14px secondary, 12px caption. Adjustable tracking for every scale.
const palette = {
primary: "#f59e0b",
accent: "#d97706",
};