Named color · #FBF9E8
Elderflower
Elderflower is #FBF9E8: rgb(251 249 232), hsl(54 70% 95%), oklch(0.979 0.022 101.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Elderflower color name →
#FBF9E8
oklch(0.979 0.022 101.3)
Color conversions
- HEX
- #fbf9e8
- RGB
- rgb(251 249 232)
- HSL
- hsl(54 70% 95%)
- HWB
- hwb(54 91% 2%)
- OKLCH
- oklch(0.979 0.022 101.3)
- OKLab
- oklab(0.979 -0.004 0.022)
- CIE Lab
- lab(97.74 -1.45 8.44)
- LCH
- lch(97.74 8.56 99.7)
- CMYK
- cmyk(0% 1% 8% 2%)
Tints · Shades · Tones
Tints
- FBFAEA
- FCFAED
- FCFBEF
- FDFBF1
- FDFCF4
- FDFDF6
- FEFDF8
- FEFEFA
- FFFEFD
Shades
- DAD9CA
- BAB9AC
- 9C9A90
- 7E7D74
- 616159
- 464640
- 2D2C29
- 151513
- 030303
Tones
- EEECDD
- E1E0D2
- D5D3C8
- C8C7BD
- BCBBB3
- AFAFA8
- A3A39E
- 979794
- 8C8B8A
Color harmonies
Complementary +180°
- FBF9E8
Elderflower
- F7F7FF
≈ Ghost White
Analogous -30° +30°
- FBF9E8
Elderflower
- FFF7ED
≈ Fatback
- F3FCEC
≈ Placebo Lime
Triadic +120° +240°
- FBF9E8
Elderflower
- EEFBFF
≈ Placebo Sky
- FFF5FB
≈ Cold Snow
Split-complementary +150° +210°
- FBF9E8
Elderflower
- F3F9FF
≈ Alice Blue
- FBF6FF
≈ Ghost White
Tetradic +90° +180° +270°
- FBF9E8
Elderflower
- E8FDFC
≈ Bubbles
- F7F7FF
≈ Ghost White
- FFF5F6
≈ Sea Salt Sherbet
Contrast & accessibility
Ag
FailOn white
WCAG 1.05:1 · APCA Lc 0
Ag
AAAOn black
WCAG 19.81:1 · APCA Lc 103
Best text color: #000000
WCAG 19.81:1 (AAA) · APCA Lc 103
Contrast pairs
Code snippets
CSS
:root {
--elderflower: #fbf9e8;
--elderflower-rgb: 251 249 232;
--elderflower-oklch: oklch(0.979 0.022 101.3);
}
.element {
color: var(--elderflower);
background-color: hsl(54 70% 95%);
border-color: oklch(0.979 0.022 101.3);
}Tailwind CSS v4
@theme {
--color-elderflower: #fbf9e8;
--color-elderflower-50: #f6f5ee;
--color-elderflower-100: #e9e8e0;
--color-elderflower-200: #d6d5ca;
--color-elderflower-300: #b9b8ab;
--color-elderflower-400: #a19f90;
--color-elderflower-500: #898776;
--color-elderflower-600: #747264;
--color-elderflower-700: #5d5b50;
--color-elderflower-800: #44433a;
--color-elderflower-900: #2f2e28;
--color-elderflower-950: #1c1b16;
}SCSS
$elderflower: #fbf9e8;
$elderflower-rgb: 251, 249, 232;
$elderflower-light: mix(#fff, $elderflower, 20%);
$elderflower-dark: mix(#000, $elderflower, 20%);
.element {
color: $elderflower;
box-shadow: 0 0 0 2px rgba($elderflower, 0.35);
}