Nearest named color · #E3E7F7
#E3E7F7
Nearest named color: Foundation White
#E3E7F7 (rgb(227 231 247), hsl(228 56% 93%), oklch(0.93 0.022 274.7)) is closest to the named color Foundation White. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#E3E7F7
oklch(0.93 0.022 274.7)
Color conversions
- HEX
- #e3e7f7
- RGB
- rgb(227 231 247)
- HSL
- hsl(228 56% 93%)
- HWB
- hwb(228 89% 3%)
- OKLCH
- oklch(0.93 0.022 274.7)
- OKLab
- oklab(0.93 0.002 -0.022)
- CIE Lab
- lab(91.69 0.85 -8.27)
- LCH
- lch(91.69 8.32 275.8)
- CMYK
- cmyk(8% 6% 0% 3%)
Tints · Shades · Tones
Tints
- E6E9F8
- E9ECF9
- EBEEF9
- EEF1FA
- F1F3FB
- F4F5FC
- F7F8FD
- F9FAFD
- FCFDFE
Shades
- C5C9D7
- A8ABB7
- 8C8F99
- 71737C
- 575960
- 3F4045
- 27282C
- 121315
- 030303
Tones
- D9DCEB
- CED2DE
- C4C7D2
- BABCC6
- B0B2BA
- A6A8AE
- 9D9EA2
- 939497
- 898A8B
Color harmonies
Complementary +180°
- E3E7F7
Foundation White
- ECE8D8
≈ Light Frost
Analogous -30° +30°
- E3E7F7
Foundation White
- DCEAF6
≈ Celestial Cathedral
- EBE4F4
≈ Sheer Lavender
Triadic +120° +240°
- E3E7F7
Foundation White
- F6E3DE
≈ Faded Light
- DDECE1
≈ Pastel Smirk
Split-complementary +150° +210°
- E3E7F7
Foundation White
- F3E5D9
≈ Butter Icing
- E4EBDB
≈ Minified Mint
Tetradic +90° +180° +270°
- E3E7F7
Foundation White
- F6E2E6
≈ Be Mine
- ECE8D8
≈ Light Frost
- D8EDE9
≈ Puffy Little Cloud
Contrast & accessibility
Ag
FailOn white
WCAG 1.23:1 · APCA Lc 11
Ag
AAAOn black
WCAG 17.03:1 · APCA Lc 93
Best text color: #000000
WCAG 17.03:1 (AAA) · APCA Lc 93
Contrast pairs
Code snippets
CSS
:root {
--foundation-white: #e3e7f7;
--foundation-white-rgb: 227 231 247;
--foundation-white-oklch: oklch(0.93 0.022 274.7);
}
.element {
color: var(--foundation-white);
background-color: hsl(228 56% 93%);
border-color: oklch(0.93 0.022 274.7);
}Tailwind CSS v4
@theme {
--color-foundation-white: #e3e7f7;
--color-foundation-white-50: #f3f5fc;
--color-foundation-white-100: #e6e7ef;
--color-foundation-white-200: #d1d4de;
--color-foundation-white-300: #b4b7c3;
--color-foundation-white-400: #9a9eac;
--color-foundation-white-500: #818595;
--color-foundation-white-600: #6e717e;
--color-foundation-white-700: #585a65;
--color-foundation-white-800: #40424a;
--color-foundation-white-900: #2c2e34;
--color-foundation-white-950: #191a1f;
}SCSS
$foundation-white: #e3e7f7;
$foundation-white-rgb: 227, 231, 247;
$foundation-white-light: mix(#fff, $foundation-white, 20%);
$foundation-white-dark: mix(#000, $foundation-white, 20%);
.element {
color: $foundation-white;
box-shadow: 0 0 0 2px rgba($foundation-white, 0.35);
}