ع

SaaS Dashboard

Dark navigation, indigo primary and green success states.

≈ Midnight Slate
≈ Navy Ink
≈ Medium Slate Blue
≈ Mint
≈ Cool White

Color codes

HEXRGBHSLCMYK
hsl(222, 47%, 11%)cmyk(64%, 45%, 0%, 84%)
hsl(217, 33%, 17%)cmyk(49%, 31%, 0%, 77%)
hsl(239, 84%, 67%)cmyk(59%, 58%, 0%, 5%)
hsl(160, 84%, 39%)cmyk(91%, 0%, 30%, 27%)
hsl(210, 40%, 98%)cmyk(2%, 1%, 0%, 1%)

CSS

:root {
  --saas-dashboard-1: #0F172A;
  --saas-dashboard-2: #1E293B;
  --saas-dashboard-3: #6366F1;
  --saas-dashboard-4: #10B981;
  --saas-dashboard-5: #F8FAFC;
}

How these colors work together

Its hues are spread widely around the wheel, giving a balanced, varied scheme. Overall it reads cool. Lightness spans 87 points, which sets how much contrast you can create.

4 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is ⁦#0F172A⁩ on ⁦#F8FAFC⁩ (17.06:1).

SaaS Dashboard — readable text using the best pair.

Suggested applications

  • Website themes and design systems.
  • Interface themes: use the lightest color for backgrounds and the darkest for text.
  • Brand kits, social graphics and presentations.

#ui#dashboard#dark

Check accessibility Simulate color blindness CSS variables

Frequently asked questions

How do I use the SaaS Dashboard palette?
The SaaS Dashboard palette has 5 colors. Use one dominant color for large areas, a supporting color for secondary elements and the most saturated color sparingly as an accent.
Which colors in this palette are best for text?
Use ⁦#0F172A⁩ on ⁦#F8FAFC⁩: it has a contrast ratio of 17.06:1.
Can I download this palette?
Yes. Export it as PNG, SVG, CSS variables, JSON or plain text with the buttons above the color table.

More palettes

Accessible Contrast#FFFFFF #1A1A1A #0050B3 #B00020 #00703CClean Blog#FFFFFF #F3F4F6 #374151 #111827 #2563EBWarm E-commerce#FFF7ED #FED7AA #EA580C #7C2D12 #1C1917Faded Postcard#D8C3A5 #E98074 #8E8D8A #E85A4F #EAE7DCJapandi#F1EDE6 #D6CBBD #A89A86 #5F574B #2F2C28Marble Hall#F6F4F0 #E2DDD5 #BFB6A8 #7D7366 #2E2A26