Color collection
Cool Gray Color Palettes
Cool gray palettes for SaaS dashboards, documentation, productivity apps, and restrained modern UI.
#3192D8Accent#D65187Surface#EBEFF4Text#121A21Support#CE82AFCool Gray 11Gray / Cool / SaaSQuality 98Primary#3163D8Accent#D65A51Surface#EBEDF4Text#121621Support#CE8299Cool Gray 12Gray / Cool / SaaSQuality 96Primary#3134D8Accent#D69851Surface#ECEBF4Text#131221Support#CE8283Cool Gray 14Gray / Cool / SaaSQuality 96Primary#8D31D8Accent#98D651Surface#F1EBF4Text#1B1221Support#CEAC82Cool Gray 5Gray / Cool / SaaSQuality 95Primary#31D831Accent#51B3D6Surface#EBF4EDText#122113Support#8282CECool Gray 6Gray / Cool / SaaSQuality 95Primary#31D861Accent#5175D6Surface#EBF4EFText#122117Support#9882CEHow to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for SaaS products, docs, productivity tools, and admin dashboards. Use gray for hierarchy and add one accent color for primary actions and active states.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
CSS Variables
:root {
--primary: #3192D8;
--accent: #D65187;
--surface: #EBEFF4;
--text: #121A21;
--support: #CE82AF;
}FAQ
Where should I use cool gray color palettes?
These palettes are designed for SaaS products, docs, productivity tools, and admin dashboards.
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 gray for hierarchy and add one accent color for primary actions and active states.