Benoemde kleur · #D3DEDF
Spa Blue
Spa Blue is #D3DEDF: rgb(211 222 223), hsl(185 16% 85%), oklch(0.893 0.012 203.5). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Gray mean? → · Spa Blue color name →
#D3DEDF
oklch(0.893 0.012 203.5)
Kleurconversies
- HEX
- #d3dedf
- RGB
- rgb(211 222 223)
- HSL
- hsl(185 16% 85%)
- HWB
- hwb(185 83% 13%)
- OKLCH
- oklch(0.893 0.012 203.5)
- OKLab
- oklab(0.893 -0.011 -0.005)
- CIE Lab
- lab(87.65 -3.69 -1.84)
- LCH
- lch(87.65 4.12 206.5)
- CMYK
- cmyk(5% 0% 0% 13%)
Tinten · Schaduwen · Tonen
Tinten
- D7E1E2
- DCE5E5
- E0E8E9
- E4EBEC
- E9EEEF
- EDF2F2
- F2F5F5
- F6F8F9
- FBFCFC
Schaduwen
- B7C1C2
- 9CA5A5
- 82898A
- 696F6F
- 515556
- 3A3D3D
- 242627
- 101212
- 020202
Tonen
- CAD4D5
- C2CACB
- B9C1C2
- B1B7B8
- A9AEAE
- A0A4A5
- 989B9B
- 909292
- 888989
Kleurharmonieën
Complementair +180°
- D3DEDF
Spa Blue
- E3D9D8
≈ Star Magic
Analoog -30° +30°
- D3DEDF
Spa Blue
- D4DEDB
≈ December Rain
- D4DDE2
≈ Ocean Dream
Triadisch +120° +240°
- D3DEDF
Spa Blue
- E0D9E0
≈ Little Lilac
- DFDBD3
≈ Empire Porcelain
Gesplitst complementair +150° +210°
- D3DEDF
Spa Blue
- E2D8DC
≈ Philanthropist Pink
- E2DAD4
≈ Humble Beginnings
Tetradisch +90° +180° +270°
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.37:1 · APCA Lc 18
Ag
AAAOp zwart
WCAG 15.28:1 · APCA Lc 85
Beste tekstkleur: #000000
WCAG 15.28:1 (AAA) · APCA Lc 85
Contrast pairs
Codefragmenten
CSS
:root {
--spa-blue: #d3dedf;
--spa-blue-rgb: 211 222 223;
--spa-blue-oklch: oklch(0.893 0.012 203.5);
}
.element {
color: var(--spa-blue);
background-color: hsl(185 16% 85%);
border-color: oklch(0.893 0.012 203.5);
}Tailwind CSS v4
@theme {
--color-spa-blue: #d3dedf;
--color-spa-blue-50: #f1f6f7;
--color-spa-blue-100: #e3e9ea;
--color-spa-blue-200: #cfd6d7;
--color-spa-blue-300: #b1b9ba;
--color-spa-blue-400: #97a1a1;
--color-spa-blue-500: #7d898a;
--color-spa-blue-600: #6a7474;
--color-spa-blue-700: #555c5d;
--color-spa-blue-800: #3e4444;
--color-spa-blue-900: #2a2f2f;
--color-spa-blue-950: #181b1c;
}SCSS
$spa-blue: #d3dedf;
$spa-blue-rgb: 211, 222, 223;
$spa-blue-light: mix(#fff, $spa-blue, 20%);
$spa-blue-dark: mix(#000, $spa-blue, 20%);
.element {
color: $spa-blue;
box-shadow: 0 0 0 2px rgba($spa-blue, 0.35);
}