Stone Cold color palette
Wet slate and river stone, all with a cool blue-gray undertone. #ECEFF1 is pale enough for a background, #B0BEC5 and #78909C sit in the middle, and #455A64 and #263238 handle the heavy lifting. Next to a pure gray scale it feels a degree colder and more technical. It's built for enterprise dashboards and engineering reports.
Stone Cold palette in use
Set #ECEFF1 as the page color and #263238 for body text. #455A64 works for buttons and the top nav, #B0BEC5 for borders, and #78909C for icons and inactive tabs.
This pair measures 11.39:1, so it works for body text too. The button uses #78909C with black text.
ButtonGood for
- Enterprise dashboard
- B2B documentation
- Cybersecurity tool
- Engineering report
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#263238 | #ECEFF1 | 11.39:1 | AAA |
#263238 | #B0BEC5 | 6.90:1 | AA |
#455A64 | #ECEFF1 | 6.27:1 | AA |
#263238 | #78909C | 3.92:1 | AA large |
#455A64 | #B0BEC5 | 3.79:1 | AA large |
Stone Cold palette as code
CSS variables
:root {
--stone-cold-1: #ECEFF1;
--stone-cold-2: #B0BEC5;
--stone-cold-3: #78909C;
--stone-cold-4: #455A64;
--stone-cold-5: #263238;
}Tailwind v4
@theme {
--color-stone-cold-1: #ECEFF1;
--color-stone-cold-2: #B0BEC5;
--color-stone-cold-3: #78909C;
--color-stone-cold-4: #455A64;
--color-stone-cold-5: #263238;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'stone-cold': {
100: '#ECEFF1',
200: '#B0BEC5',
300: '#78909C',
400: '#455A64',
500: '#263238',
},SCSS
$stone-cold-1: #ECEFF1;
$stone-cold-2: #B0BEC5;
$stone-cold-3: #78909C;
$stone-cold-4: #455A64;
$stone-cold-5: #263238;JSON
["#ECEFF1","#B0BEC5","#78909C","#455A64","#263238"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.