Color collection
Muted Color Palettes
Muted palettes for mature brands, editorial websites, product UI, and calm social graphics.
#968EE1Accent#CC9CE8Surface#EBE7F9Text#151221Support#CE8A82Muted 22Muted / Editorial / ModernQuality 92Primary#928EE1Accent#9CE8BDSurface#EAE7F9Text#141221Support#CE8682Muted 15Muted / Editorial / ModernQuality 91Primary#8EE194Accent#E89CDBSurface#E7F9EAText#122114Support#8782CEMuted 16Muted / Editorial / ModernQuality 91Primary#8EE1ABAccent#E89CB8Surface#E7F9EFText#122118Support#9D82CEMuted 21Muted / Editorial / ModernQuality 91Primary#8EA2E1Accent#9EE89CSurface#E7E9F9Text#121521Support#CE8294Muted 23Muted / Editorial / ModernQuality 91Primary#AA8EE1Accent#CEE89CSurface#EFE7F9Text#181221Support#CE9C82How to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for editorial sites, mature brands, and understated product pages. Use lower saturation while preserving enough contrast between text, borders, and actions.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
CSS Variables
:root {
--primary: #968EE1;
--accent: #CC9CE8;
--surface: #EBE7F9;
--text: #151221;
--support: #CE8A82;
}FAQ
Where should I use muted color palettes?
These palettes are designed for editorial sites, mature brands, and understated product pages.
Can I copy these colors into a design system?
Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.
How do I avoid low contrast?
Use lower saturation while preserving enough contrast between text, borders, and actions.