Muted Color
A color with reduced saturation or chroma — softer and less vivid than its pure form, achieved by mixing with gray, its complement, or both.
What it means
A muted color is any color that's been pulled back from full vibrancy. Technically, muting is what happens when you add gray (creating a tone), but in practice designers also mute colors by mixing with a complement (which also grays the result) or by simply reducing chroma in OKLCH.
Muted palettes feel sophisticated, natural, and restrained. They're the colors of weathered surfaces, overcast skies, and vintage photography — colors that have "lived in" rather than screaming for attention.
Why it matters in palette design
Muted palettes are increasingly popular in UI design because they reduce visual fatigue and let content take center stage. A muted primary can still be distinctive while feeling calmer than a fully saturated one. The trick is maintaining enough chroma for functional differentiation — too muted and your primary, secondary, and error states all blur together.
Common confusion
Muted vs. desaturated vs. toned: All three reduce vibrancy, but through different mechanisms. "Desaturated" is the broadest term (any reduction in saturation/chroma). "Toned" specifically means gray was added. "Muted" is the aesthetic result — a color that feels soft and understated, regardless of how it got there.
Example
A lifestyle brand uses a muted sage green (OKLCH chroma ≈ 0.06) instead of vivid green for its primary. The result feels organic and premium. Vivid green accents are reserved for success states only, creating clear separation between brand color and semantic color.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.