Color collection
Settings Page Color Palettes
Practical settings palettes for account screens, preferences, admin forms, and control-heavy UI.
#3190D8Accent#D68B51Surface#EBEFF4Text#121A21Support#CE82ADSettings Page 2Settings / Product / MinimalQuality 98Primary#3161D8Accent#8B51D6Surface#EBEDF4Text#121521Support#CE8298Settings Page 23Settings / Product / MinimalQuality 98Primary#3169D8Accent#51D670Surface#EBEDF4Text#121621Support#CE829CSettings Page 22Settings / Product / MinimalQuality 97Primary#3198D8Accent#70D651Surface#EBF0F4Text#121A21Support#CE82B1Settings Page 5Settings / Product / MinimalQuality 96Primary#9031D8Accent#D65168Surface#F1EBF4Text#1B1221Support#CEAD82Settings Page 24Settings / Product / MinimalQuality 96Primary#313AD8Accent#51D6AESurface#ECEBF4Text#131221Support#CE8286How to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for settings screens, account pages, preferences, and admin forms. Keep colors quiet and use contrast to distinguish destructive, save, and neutral 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: #3190D8;
--accent: #D68B51;
--surface: #EBEFF4;
--text: #121A21;
--support: #CE82AD;
}FAQ
Where should I use settings page color palettes?
These palettes are designed for settings screens, account pages, preferences, and admin forms.
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?
Keep colors quiet and use contrast to distinguish destructive, save, and neutral actions.