Named color · #DFE0EE
Imagination
Imagination is #DFE0EE: rgb(223 224 238), hsl(236 31% 90%), oklch(0.91 0.019 282.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Imagination color name →
#DFE0EE
oklch(0.91 0.019 282.7)
Color conversions
- HEX
- #dfe0ee
- RGB
- rgb(223 224 238)
- HSL
- hsl(236 31% 90%)
- HWB
- hwb(236 87% 7%)
- OKLCH
- oklch(0.91 0.019 282.7)
- OKLab
- oklab(0.91 0.004 -0.019)
- CIE Lab
- lab(89.41 1.59 -6.97)
- LCH
- lch(89.41 7.15 282.8)
- CMYK
- cmyk(6% 6% 0% 7%)
Tints · Shades · Tones
Tints
- E2E3F0
- E5E6F1
- E9E9F3
- ECECF5
- EFEFF7
- F2F3F8
- F5F6FA
- F9F9FC
- FCFCFD
Shades
- C2C3CF
- A5A6B1
- 8A8A93
- 6F7077
- 56565C
- 3D3E42
- 27272A
- 121214
- 020203
Tones
- D5D6E2
- CBCCD7
- C2C2CC
- B8B8C1
- AEAFB5
- A5A5AB
- 9B9CA0
- 929295
- 89898A
Color harmonies
Complementary +180°
- DFE0EE
Imagination
- E3E2D4
≈ Divine Cream
Analogous -30° +30°
- DFE0EE
Imagination
- D9E2EE
≈ Blooming Aster
- E6DEEB
≈ Faint Fuchsia
Triadic +120° +240°
- DFE0EE
Imagination
- EDDED8
≈ Apricot Foam
- D7E5DE
≈ Cactus Blossom
Split-complementary +150° +210°
- DFE0EE
Imagination
- E9E0D4
≈ Mountain Peak
- DCE4D7
≈ Lightest Sky
Tetradic +90° +180° +270°
- DFE0EE
Imagination
- EEDCDE
≈ Cupid’s Revenge
- E3E2D4
≈ Divine Cream
- D4E6E5
≈ Plateau
Contrast & accessibility
Ag
FailOn white
WCAG 1.30:1 · APCA Lc 15
Ag
AAAOn black
WCAG 16.03:1 · APCA Lc 88
Best text color: #000000
WCAG 16.03:1 (AAA) · APCA Lc 88
Contrast pairs
Code snippets
CSS
:root {
--imagination: #dfe0ee;
--imagination-rgb: 223 224 238;
--imagination-oklch: oklch(0.91 0.019 282.7);
}
.element {
color: var(--imagination);
background-color: hsl(236 31% 90%);
border-color: oklch(0.91 0.019 282.7);
}Tailwind CSS v4
@theme {
--color-imagination: #dfe0ee;
--color-imagination-50: #f4f4fa;
--color-imagination-100: #e7e7ee;
--color-imagination-200: #d3d3dc;
--color-imagination-300: #b6b6c1;
--color-imagination-400: #9c9daa;
--color-imagination-500: #848593;
--color-imagination-600: #70707c;
--color-imagination-700: #595a63;
--color-imagination-800: #414249;
--color-imagination-900: #2d2d33;
--color-imagination-950: #1a1a1e;
}SCSS
$imagination: #dfe0ee;
$imagination-rgb: 223, 224, 238;
$imagination-light: mix(#fff, $imagination, 20%);
$imagination-dark: mix(#000, $imagination, 20%);
.element {
color: $imagination;
box-shadow: 0 0 0 2px rgba($imagination, 0.35);
}