Dashboard UI Gradient: Slate → Green (Ops-calm)
A professional slate-green gradient palette designed for dashboard interfaces. This ops-calm style color scheme is optimized for modern web and mobile applications, providing excellent contrast and visual appeal.
Preview · The Contextual Visualizer
Overview
Switch templates to see this palette in Admin Dashboard, Pricing Page, and Mobile Profile contexts.
Accessibility & Contrast
Real-time Contrast
Design Intent & Use Cases
- •Optimized for monitoring and status scanning
- •Emerald as a consistent success/healthy semantic color
- •Stable neutrals for high data density
Color Psychology
Emerald signals safety and progress, which is valuable in operational contexts where users look for green lights. The slate base keeps attention on numbers and charts rather than color itself.
Best Usage Context
Use emerald for 'healthy', 'connected', 'synced' and 'resolved' states. Pair it with restrained neutral surfaces so alerts (amber/red) can still break through when needed.
Accessibility & Contrast
Primary text is tuned for high contrast on dark surfaces. The emerald action color uses dark text to stay readable at small sizes and on lower brightness settings.
Color Palette
Gradient Presets
linear-gradient(135deg, #1E293B 0%, #334155 50%, #10B981 100%)radial-gradient(circle at center, #10B981 0%, #334155 50%, #1E293B 100%)Copy & Use
:root {
--color-primary: #1E293B;
--color-accent: #10B981;
--bg-page: #020617;
--bg-surface: #0B1220;
--border-color: #1E293B;
--text-primary: #E2E8F0;
--text-secondary: #94A3B8;
--button-primary-bg: #10B981;
--button-primary-text: #020617;
--button-secondary-bg: #1E293B;
--button-secondary-text: #E2E8F0;
}Best for
✓Best for
- System monitoring
- DevOps dashboards
- Status pages and incident tools
- SaaS admin panels
✕Not recommended for
- Consumer marketing pages
- Playful lifestyle apps
- Bright, image-heavy layouts