Color collection
Minimal Gray Color Palettes
Neutral gray palettes for modern websites, docs, dashboards, and understated product interfaces.
#3185D8Accent#B751D6Surface#EBEFF4Text#121921Support#CE82A8Minimal Gray 6Minimal / Gray / ModernQuality 98Primary#3155D8Accent#D651B7Surface#EBECF4Text#121521Support#CE8293Minimal Gray 1Minimal / Gray / ModernQuality 95Primary#31D86EAccent#51D6C9Surface#EBF4F0Text#122119Support#9E82CEMinimal Gray 4Minimal / Gray / ModernQuality 95Primary#31B4D8Accent#7951D6Surface#EBF1F4Text#121D21Support#CE82BEMinimal Gray 7Minimal / Gray / ModernQuality 95Primary#3C31D8Accent#D65179Surface#EDEBF4Text#141221Support#CE8782Minimal Gray 8Minimal / Gray / ModernQuality 95Primary#6C31D8Accent#D66851Surface#F0EBF4Text#181221Support#CE9D82How to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for SaaS docs, admin UI, and restrained product pages. Let gray define hierarchy through surface, border, and text steps, then add only one strong accent.
Minimal palettes use fewer saturated colors and rely on surface, border, and text separation for practical interface hierarchy.
CSS Variables
:root {
--primary: #3185D8;
--accent: #B751D6;
--surface: #EBEFF4;
--text: #121921;
--support: #CE82A8;
}FAQ
Where should I use minimal gray color palettes?
These palettes are designed for SaaS docs, admin UI, and restrained 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?
Let gray define hierarchy through surface, border, and text steps, then add only one strong accent.