Named color · #F4F1EC
Lustre White
Lustre White is #F4F1EC: rgb(244 241 236), hsl(37 27% 94%), oklch(0.959 0.007 80.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Lustre White color name →
#F4F1EC
oklch(0.959 0.007 80.7)
Color conversions
- HEX
- #f4f1ec
- RGB
- rgb(244 241 236)
- HSL
- hsl(37 27% 94%)
- HWB
- hwb(37 93% 4%)
- OKLCH
- oklch(0.959 0.007 80.7)
- OKLab
- oklab(0.959 0.001 0.007)
- CIE Lab
- lab(95.28 0.39 2.79)
- LCH
- lch(95.28 2.82 82)
- CMYK
- cmyk(0% 1% 3% 4%)
Tints · Shades · Tones
Tints
- F5F2EE
- F6F4F0
- F7F5F2
- F8F7F4
- F9F8F5
- FBF9F7
- FCFBF9
- FDFCFB
- FEFEFD
Shades
- D4D2CD
- B5B3AF
- 979592
- 7A7976
- 5E5D5B
- 444342
- 2B2B29
- 141413
- 030303
Tones
- E8E5E1
- DCD9D5
- D0CECA
- C4C2BF
- B8B7B4
- ADACAA
- A1A09F
- 969695
- 8B8B8A
Color harmonies
Complementary +180°
- F4F1EC
Lustre White
- EFF2F7
≈ Airport
Analogous -30° +30°
- F4F1EC
Lustre White
- F6F0ED
≈ Soft Breeze
- F1F2EC
≈ White Cloud
Triadic +120° +240°
- F4F1EC
Lustre White
- ECF3F3
≈ Maui Mist
- F4F0F5
≈ Grim White
Split-complementary +150° +210°
- F4F1EC
Lustre White
- EDF2F6
≈ Airport
- F1F1F6
≈ Alpine Goat
Tetradic +90° +180° +270°
- F4F1EC
Lustre White
- EDF3F1
≈ Beluga
- EFF2F7
≈ Airport
- F6EFF2
≈ Plastic Clouds
Contrast & accessibility
Ag
FailOn white
WCAG 1.12:1 · APCA Lc 0
Ag
AAAOn black
WCAG 18.63:1 · APCA Lc 99
Best text color: #000000
WCAG 18.63:1 (AAA) · APCA Lc 99
Contrast pairs
Code snippets
CSS
:root {
--lustre-white: #f4f1ec;
--lustre-white-rgb: 244 241 236;
--lustre-white-oklch: oklch(0.959 0.007 80.7);
}
.element {
color: var(--lustre-white);
background-color: hsl(37 27% 94%);
border-color: oklch(0.959 0.007 80.7);
}Tailwind CSS v4
@theme {
--color-lustre-white: #f4f1ec;
--color-lustre-white-50: #f6f5f3;
--color-lustre-white-100: #e9e8e5;
--color-lustre-white-200: #d6d4d1;
--color-lustre-white-300: #b9b7b3;
--color-lustre-white-400: #a19e9a;
--color-lustre-white-500: #898681;
--color-lustre-white-600: #74716d;
--color-lustre-white-700: #5c5a57;
--color-lustre-white-800: #444240;
--color-lustre-white-900: #2f2e2c;
--color-lustre-white-950: #1b1a19;
}SCSS
$lustre-white: #f4f1ec;
$lustre-white-rgb: 244, 241, 236;
$lustre-white-light: mix(#fff, $lustre-white, 20%);
$lustre-white-dark: mix(#000, $lustre-white, 20%);
.element {
color: $lustre-white;
box-shadow: 0 0 0 2px rgba($lustre-white, 0.35);
}