monochromecool
Slate Sky Color Palette
Slate Sky is a monochrome and cool color palette of 5 colors: Ghost White (#f8f9fa), Platinum (#dee2e6), Ash Grey (#adb5bd), Dark Slate Gray (#495057) and Gunmetal (#212529). It leans on neutral tones rather than one strong hue.
The darkest color, Gunmetal, on the lightest, Ghost White, gives a 14.63:1 contrast ratio — enough for body text at WCAG AAA. 5 pairs in this palette pass AA for normal text. Dark Slate Gray (#495057) is its most saturated color and a natural choice for buttons and links.
Colors
- Ghost White
- Platinum
- Ash Grey
- Dark Slate Gray
- Gunmetal
CSS Output
:root {
--slate-sky-1: #f8f9fa;
--slate-sky-2: #dee2e6;
--slate-sky-3: #adb5bd;
--slate-sky-4: #495057;
--slate-sky-5: #212529;
}Slate Sky on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Gunmetal on Ghost White#212529 on #f8f9fa14.63:1AAA
- Gunmetal on Platinum#212529 on #dee2e611.84:1AAA
- Dark Slate Gray on Ghost White#495057 on #f8f9fa7.75:1AAA
- Gunmetal on Ash Grey#212529 on #adb5bd7.43:1AAA
- Dark Slate Gray on Platinum#495057 on #dee2e66.27:1AA
- Dark Slate Gray on Ash Grey#495057 on #adb5bd3.94:1AA Large