Nearest named color · #ECF1F1
#ECF1F1
Nearest named color: Beluga
#ECF1F1 (rgb(236 241 241), hsl(180 15% 94%), oklch(0.954 0.005 197.1)) is closest to the named color Beluga. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#ECF1F1
oklch(0.954 0.005 197.1)
Color conversions
- HEX
- #ecf1f1
- RGB
- rgb(236 241 241)
- HSL
- hsl(180 15% 94%)
- HWB
- hwb(180 93% 5%)
- OKLCH
- oklch(0.954 0.005 197.1)
- OKLab
- oklab(0.954 -0.005 -0.002)
- CIE Lab
- lab(94.76 -1.72 -0.61)
- LCH
- lch(94.76 1.83 199.6)
- CMYK
- cmyk(2% 0% 0% 5%)
Tints · Shades · Tones
Tints
- EEF2F2
- F0F4F4
- F2F5F5
- F4F7F7
- F5F8F8
- F7F9F9
- F9FBFB
- FBFCFC
- FDFEFE
Shades
- CDD2D2
- AFB3B3
- 929595
- 767979
- 5B5D5D
- 424343
- 292B2B
- 131414
- 030303
Tones
- E1E5E5
- D5D9D9
- CACECE
- BFC2C2
- B4B7B7
- AAACAC
- 9FA0A0
- 959696
- 8A8B8B
Color harmonies
Complementary +180°
- ECF1F1
Beluga
- F3EEEE
≈ Angelic Wings
Analogous -30° +30°
- ECF1F1
Beluga
- EDF1EF
≈ Snowbelt
- ECF1F3
≈ Powder White
Triadic +120° +240°
- ECF1F1
Beluga
- F1EFF2
≈ Snowflake
- F2EFEC
≈ White Shoulders
Split-complementary +150° +210°
- ECF1F1
Beluga
- F3EEF0
≈ Line Dried Sheets
- F3EFED
≈ Little Pinky
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.14:1 · APCA Lc 0
Ag
AAAOn black
WCAG 18.41:1 · APCA Lc 98
Best text color: #000000
WCAG 18.41:1 (AAA) · APCA Lc 98
Contrast pairs
Code snippets
CSS
:root {
--beluga: #ecf1f1;
--beluga-rgb: 236 241 241;
--beluga-oklch: oklch(0.954 0.005 197.1);
}
.element {
color: var(--beluga);
background-color: hsl(180 15% 94%);
border-color: oklch(0.954 0.005 197.1);
}Tailwind CSS v4
@theme {
--color-beluga: #ecf1f1;
--color-beluga-50: #f3f5f6;
--color-beluga-100: #e6e8e8;
--color-beluga-200: #d2d5d5;
--color-beluga-300: #b4b8b8;
--color-beluga-400: #9b9f9f;
--color-beluga-500: #828787;
--color-beluga-600: #6e7272;
--color-beluga-700: #585c5c;
--color-beluga-800: #404343;
--color-beluga-900: #2c2e2e;
--color-beluga-950: #191b1b;
}SCSS
$beluga: #ecf1f1;
$beluga-rgb: 236, 241, 241;
$beluga-light: mix(#fff, $beluga, 20%);
$beluga-dark: mix(#000, $beluga, 20%);
.element {
color: $beluga;
box-shadow: 0 0 0 2px rgba($beluga, 0.35);
}