Color collection
Analytics Dashboard Palettes
Analytics palettes for metric cards, charts, reports, finance dashboards, and executive summaries.
#316CD8Accent#D69D51Surface#EBEDF4Text#121621Support#CE829DAnalytics Dashboard 13Analytics / Dashboard / DataQuality 97Primary#319BD8Accent#D65F51Surface#EBF0F4Text#121A21Support#CE82B2Analytics Dashboard 15Analytics / Dashboard / DataQuality 96Primary#313CD8Accent#D6CD51Surface#ECEBF4Text#121221Support#CE8287Analytics Dashboard 17Analytics / Dashboard / DataQuality 96Primary#8531D8Accent#56D651Surface#F1EBF4Text#1A1221Support#CEA882Analytics Dashboard 1Analytics / Dashboard / DataQuality 95Primary#D83137Accent#D69451Surface#F4ECEBText#211312Support#85CE82Analytics Dashboard 2Analytics / Dashboard / DataQuality 95Primary#D85B31Accent#D6D251Surface#F4EFEBText#211712Support#82CE95How to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for analytics products, reports, BI tools, and executive dashboards. Prioritize text and chart contrast before adding multiple series colors.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
CSS Variables
:root {
--primary: #316CD8;
--accent: #D69D51;
--surface: #EBEDF4;
--text: #121621;
--support: #CE829D;
}FAQ
Where should I use analytics dashboard palettes?
These palettes are designed for analytics products, reports, BI tools, and executive 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?
Prioritize text and chart contrast before adding multiple series colors.