Named color · #D3DDE7
Nordic Breeze
Nordic Breeze is #D3DDE7: rgb(211 221 231), hsl(210 29% 87%), oklch(0.893 0.017 248). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Nordic Breeze color name →
#D3DDE7
oklch(0.893 0.017 248)
Color conversions
- HEX
- #d3dde7
- RGB
- rgb(211 221 231)
- HSL
- hsl(210 29% 87%)
- HWB
- hwb(210 83% 9%)
- OKLCH
- oklch(0.893 0.017 248)
- OKLab
- oklab(0.893 -0.007 -0.016)
- CIE Lab
- lab(87.57 -2.06 -6.14)
- LCH
- lch(87.57 6.47 251.5)
- CMYK
- cmyk(9% 4% 0% 9%)
Tints · Shades · Tones
Tints
- D7E0E9
- DCE4EC
- E0E7EE
- E4EBF1
- E9EEF3
- EDF1F5
- F2F5F8
- F6F8FA
- FBFCFD
Shades
- B7C0C9
- 9CA4AB
- 82888F
- 696E73
- 515559
- 3A3D40
- 242628
- 101113
- 020203
Tones
- CAD3DC
- C2CAD2
- B9C0C7
- B1B7BD
- A9ADB2
- A0A4A8
- 989B9E
- 909294
- 88898A
Color harmonies
Complementary +180°
- D3DDE7
Nordic Breeze
- E4DAD0
≈ March Breeze
Analogous -30° +30°
- D3DDE7
Nordic Breeze
- D0DFE3
≈ Cool Sky
- D9DBE8
≈ Star Jasmine
Triadic +120° +240°
- D3DDE7
Nordic Breeze
- E7D7D9
≈ Diminished Red
- D8DED2
≈ Light Iced Aniseed
Split-complementary +150° +210°
- D3DDE7
Nordic Breeze
- E7D8D3
≈ Ebb
- DEDCCF
≈ White Wisp
Tetradic +90° +180° +270°
- D3DDE7
Nordic Breeze
- E4D7E0
≈ Wine Frost
- E4DAD0
≈ March Breeze
- D3DFD7
≈ Alpine Peak
Contrast & accessibility
Ag
FailOn white
WCAG 1.37:1 · APCA Lc 18
Ag
AAAOn black
WCAG 15.26:1 · APCA Lc 85
Best text color: #000000
WCAG 15.26:1 (AAA) · APCA Lc 85
Contrast pairs
Code snippets
CSS
:root {
--nordic-breeze: #d3dde7;
--nordic-breeze-rgb: 211 221 231;
--nordic-breeze-oklch: oklch(0.893 0.017 248);
}
.element {
color: var(--nordic-breeze);
background-color: hsl(210 29% 87%);
border-color: oklch(0.893 0.017 248);
}Tailwind CSS v4
@theme {
--color-nordic-breeze: #d3dde7;
--color-nordic-breeze-50: #f1f6fa;
--color-nordic-breeze-100: #e4e8ee;
--color-nordic-breeze-200: #cfd5dc;
--color-nordic-breeze-300: #b1b8c0;
--color-nordic-breeze-400: #97a0a9;
--color-nordic-breeze-500: #7d8791;
--color-nordic-breeze-600: #6a737b;
--color-nordic-breeze-700: #555c62;
--color-nordic-breeze-800: #3e4348;
--color-nordic-breeze-900: #2a2e32;
--color-nordic-breeze-950: #181b1e;
}SCSS
$nordic-breeze: #d3dde7;
$nordic-breeze-rgb: 211, 221, 231;
$nordic-breeze-light: mix(#fff, $nordic-breeze, 20%);
$nordic-breeze-dark: mix(#000, $nordic-breeze, 20%);
.element {
color: $nordic-breeze;
box-shadow: 0 0 0 2px rgba($nordic-breeze, 0.35);
}