Named color · #D9DFE2
Mainsail
Mainsail is #D9DFE2: rgb(217 223 226), hsl(200 13% 87%), oklch(0.9 0.008 228.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Mainsail color name →
#D9DFE2
oklch(0.9 0.008 228.9)
Color conversions
- HEX
- #d9dfe2
- RGB
- rgb(217 223 226)
- HSL
- hsl(200 13% 87%)
- HWB
- hwb(200 85% 11%)
- OKLCH
- oklch(0.9 0.008 228.9)
- OKLab
- oklab(0.9 -0.005 -0.006)
- CIE Lab
- lab(88.42 -1.68 -2.21)
- LCH
- lch(88.42 2.78 232.8)
- CMYK
- cmyk(4% 1% 0% 11%)
Tints · Shades · Tones
Tints
- DDE2E5
- E1E5E8
- E4E9EB
- E8ECEE
- ECEFF0
- F0F2F3
- F3F5F6
- F7F9F9
- FBFCFC
Shades
- BCC2C4
- A1A5A8
- 868A8C
- 6C6F71
- 535657
- 3B3D3E
- 252727
- 111212
- 020203
Tones
- D0D5D8
- C7CBCE
- BDC2C4
- B4B8BA
- ABAEB0
- A3A5A6
- 9A9B9C
- 919293
- 898989
Color harmonies
Complementary +180°
- D9DFE2
Mainsail
- E2DDDA
≈ Fall Chill
Analogous -30° +30°
- D9DFE2
Mainsail
- D8E0E0
≈ Echo Mist
- DBDEE3
≈ Grey Placidity
Triadic +120° +240°
- D9DFE2
Mainsail
- E2DCDF
≈ Rusty Pebble
- DEDED9
≈ Whisper Softly
Split-complementary +150° +210°
- D9DFE2
Mainsail
- E3DCDC
≈ Coquette
- E1DDD8
≈ Closet Skeletons
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.34:1 · APCA Lc 17
Ag
AAAOn black
WCAG 15.60:1 · APCA Lc 87
Best text color: #000000
WCAG 15.60:1 (AAA) · APCA Lc 87
Contrast pairs
Code snippets
CSS
:root {
--mainsail: #d9dfe2;
--mainsail-rgb: 217 223 226;
--mainsail-oklch: oklch(0.9 0.008 228.9);
}
.element {
color: var(--mainsail);
background-color: hsl(200 13% 87%);
border-color: oklch(0.9 0.008 228.9);
}Tailwind CSS v4
@theme {
--color-mainsail: #d9dfe2;
--color-mainsail-50: #f3f5f7;
--color-mainsail-100: #e5e8ea;
--color-mainsail-200: #d1d5d7;
--color-mainsail-300: #b4b8bb;
--color-mainsail-400: #9a9fa2;
--color-mainsail-500: #81878a;
--color-mainsail-600: #6d7275;
--color-mainsail-700: #575b5e;
--color-mainsail-800: #404344;
--color-mainsail-900: #2c2e2f;
--color-mainsail-950: #191b1c;
}SCSS
$mainsail: #d9dfe2;
$mainsail-rgb: 217, 223, 226;
$mainsail-light: mix(#fff, $mainsail, 20%);
$mainsail-dark: mix(#000, $mainsail, 20%);
.element {
color: $mainsail;
box-shadow: 0 0 0 2px rgba($mainsail, 0.35);
}