Named color · #F5EDE0
White Flour
White Flour is #F5EDE0: rgb(245 237 224), hsl(37 51% 92%), oklch(0.949 0.019 80.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · White Flour color name →
#F5EDE0
oklch(0.949 0.019 80.1)
Color conversions
- HEX
- #f5ede0
- RGB
- rgb(245 237 224)
- HSL
- hsl(37 51% 92%)
- HWB
- hwb(37 88% 4%)
- OKLCH
- oklch(0.949 0.019 80.1)
- OKLab
- oklab(0.949 0.003 0.019)
- CIE Lab
- lab(94.12 1.16 7.33)
- LCH
- lch(94.12 7.42 81)
- CMYK
- cmyk(0% 3% 9% 4%)
Tints · Shades · Tones
Tints
- F6EFE3
- F7F1E6
- F8F2E9
- F9F4EC
- FAF6EF
- FBF8F3
- FCFAF6
- FDFBF9
- FEFDFC
Shades
- D5CEC3
- B6B0A6
- 98938A
- 7B7770
- 5F5C56
- 44423E
- 2B2A27
- 151412
- 030302
Tones
- E9E2D6
- DDD6CC
- D0CBC2
- C5C0B8
- B9B5AF
- ADAAA5
- A29F9C
- 969592
- 8B8A89
Color harmonies
Complementary +180°
- F5EDE0
White Flour
- E7EFFB
≈ Cotton Boll
Analogous -30° +30°
- F5EDE0
White Flour
- FAEBE3
≈ Light Rose Beige
- EEEFE1
≈ Pearl Onion
Triadic +120° +240°
- F5EDE0
White Flour
- E0F2F3
≈ Bone-Chilling
- F4EAF6
≈ Perfume Haze
Split-complementary +150° +210°
- F5EDE0
White Flour
- E2F1F9
≈ Wizard White
- EDECFB
≈ Placebo Purple
Tetradic +90° +180° +270°
- F5EDE0
White Flour
- E2F3EC
≈ Bath Bubbles
- E7EFFB
≈ Cotton Boll
- F9E9F0
≈ Morning Shine
Contrast & accessibility
Ag
FailOn white
WCAG 1.16:1 · APCA Lc 8
Ag
AAAOn black
WCAG 18.07:1 · APCA Lc 97
Best text color: #000000
WCAG 18.07:1 (AAA) · APCA Lc 97
Contrast pairs
Code snippets
CSS
:root {
--white-flour: #f5ede0;
--white-flour-rgb: 245 237 224;
--white-flour-oklch: oklch(0.949 0.019 80.1);
}
.element {
color: var(--white-flour);
background-color: hsl(37 51% 92%);
border-color: oklch(0.949 0.019 80.1);
}Tailwind CSS v4
@theme {
--color-white-flour: #f5ede0;
--color-white-flour-50: #f8f5ef;
--color-white-flour-100: #ebe7e1;
--color-white-flour-200: #d8d4cb;
--color-white-flour-300: #bcb7ad;
--color-white-flour-400: #a49d92;
--color-white-flour-500: #8d8578;
--color-white-flour-600: #777166;
--color-white-flour-700: #5f5a51;
--color-white-flour-800: #46423b;
--color-white-flour-900: #302d28;
--color-white-flour-950: #1d1a16;
}SCSS
$white-flour: #f5ede0;
$white-flour-rgb: 245, 237, 224;
$white-flour-light: mix(#fff, $white-flour, 20%);
$white-flour-dark: mix(#000, $white-flour, 20%);
.element {
color: $white-flour;
box-shadow: 0 0 0 2px rgba($white-flour, 0.35);
}