Status Colors
Success, warning, danger, info and neutral.
UI Color Palettes with HEX Codes
UI palettes pair a primary color with neutral surfaces and clear status colors. Use them as a starting point for apps, dashboards and design systems.
8 palettes
Dashboard
Blue interface with an orange highlight.
SaaS Calm
Teal-led palette with a warm action color.
Fintech
Trust-oriented blues and greens with gold.
Editorial
Text-first neutrals with a red accent.
Developer Dark
Dark surfaces with a soft blue accent.
High Contrast Pairs
Colors chosen to hold up for text and icons.
Friendly App
Violet and pink for consumer apps.
Tips for using these palettes
- Define each color once as a CSS variable and reuse it across components.
- Pick status colors (success, warning, danger, info) that also differ in lightness, not only hue.
- Check every text and background pair for at least 4.5:1 contrast.
Check every text and background pair with the contrast checker before you publish.