Nordic Smoke color palette
Every shade in Nordic Smoke is a blue-gray. Mist #ECEFF1 and pale #CFD8DC are light enough for backgrounds, #90A4AE sits in the middle, and #546E7A and #263238 are slate and charcoal. A faint blue cast keeps everything cool and orderly. It suits Scandinavian furniture, productivity software, architecture studios and weather apps, anywhere you want color to step back.
Nordic Smoke palette in use
Use #ECEFF1 for the page, #CFD8DC for borders and sidebars, and #263238 for text. #546E7A makes a restrained button color, and #90A4AE suits icons and disabled states.
This pair measures 11.39:1, so it works for body text too. The button uses #546E7A with white text.
ButtonGood for
- Productivity app UI
- Scandinavian furniture shop
- Weather app
- Architecture studio website
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 | #CFD8DC | 9.09:1 | AAA |
#263238 | #90A4AE | 5.08:1 | AA |
#546E7A | #ECEFF1 | 4.67:1 | AA |
#546E7A | #CFD8DC | 3.73:1 | AA large |
Nordic Smoke palette as code
CSS variables
:root {
--nordic-smoke-1: #ECEFF1;
--nordic-smoke-2: #CFD8DC;
--nordic-smoke-3: #90A4AE;
--nordic-smoke-4: #546E7A;
--nordic-smoke-5: #263238;
}Tailwind v4
@theme {
--color-nordic-smoke-1: #ECEFF1;
--color-nordic-smoke-2: #CFD8DC;
--color-nordic-smoke-3: #90A4AE;
--color-nordic-smoke-4: #546E7A;
--color-nordic-smoke-5: #263238;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'nordic-smoke': {
100: '#ECEFF1',
200: '#CFD8DC',
300: '#90A4AE',
400: '#546E7A',
500: '#263238',
},SCSS
$nordic-smoke-1: #ECEFF1;
$nordic-smoke-2: #CFD8DC;
$nordic-smoke-3: #90A4AE;
$nordic-smoke-4: #546E7A;
$nordic-smoke-5: #263238;JSON
["#ECEFF1","#CFD8DC","#90A4AE","#546E7A","#263238"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.