Named color · #FAF2E3
Whitewashed Fence
Whitewashed Fence is #FAF2E3: rgb(250 242 227), hsl(39 70% 94%), oklch(0.963 0.022 83.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Whitewashed Fence color name →
#FAF2E3
oklch(0.963 0.022 83.3)
Color conversions
- HEX
- #faf2e3
- RGB
- rgb(250 242 227)
- HSL
- hsl(39 70% 94%)
- HWB
- hwb(39 89% 2%)
- OKLCH
- oklch(0.963 0.022 83.3)
- OKLab
- oklab(0.963 0.003 0.021)
- CIE Lab
- lab(95.82 0.92 8.27)
- LCH
- lch(95.82 8.32 83.7)
- CMYK
- cmyk(0% 3% 9% 2%)
Tints · Shades · Tones
Tints
- FBF3E6
- FBF5E9
- FCF6EB
- FCF7EE
- FDF9F1
- FDFAF4
- FEFBF7
- FEFCF9
- FFFEFC
Shades
- D9D2C5
- BAB4A8
- 9B968C
- 7D7971
- 615E57
- 46433F
- 2D2B27
- 151412
- 030303
Tones
- EDE6D9
- E0DACE
- D4CEC4
- C7C3BA
- BBB7B0
- AFACA6
- A3A19D
- 979693
- 8B8B89
Color harmonies
Complementary +180°
- FAF2E3
Whitewashed Fence
- EDF3FF
≈ Placebo Blue
Analogous -30° +30°
- FAF2E3
Whitewashed Fence
- FFEFE6
≈ Pico Ivory
- F2F5E4
≈ Precious Dewdrop
Triadic +120° +240°
- FAF2E3
Whitewashed Fence
- E3F8F9
≈ Calm Waters
- FAEEFC
≈ Placebo Pink
Split-complementary +150° +210°
- FAF2E3
Whitewashed Fence
- E6F6FF
≈ Kodama White
- F3F1FF
≈ Cloud Break
Tetradic +90° +180° +270°
- FAF2E3
Whitewashed Fence
- E5F8F1
≈ Soft Mint
- EDF3FF
≈ Placebo Blue
- FFEEF4
≈ Powder Puff
Contrast & accessibility
Ag
FailOn white
WCAG 1.11:1 · APCA Lc 0
Ag
AAAOn black
WCAG 18.87:1 · APCA Lc 100
Best text color: #000000
WCAG 18.87:1 (AAA) · APCA Lc 100
Contrast pairs
Code snippets
CSS
:root {
--whitewashed-fence: #faf2e3;
--whitewashed-fence-rgb: 250 242 227;
--whitewashed-fence-oklch: oklch(0.963 0.022 83.3);
}
.element {
color: var(--whitewashed-fence);
background-color: hsl(39 70% 94%);
border-color: oklch(0.963 0.022 83.3);
}Tailwind CSS v4
@theme {
--color-whitewashed-fence: #faf2e3;
--color-whitewashed-fence-50: #f8f5ee;
--color-whitewashed-fence-100: #ebe7e0;
--color-whitewashed-fence-200: #d8d4ca;
--color-whitewashed-fence-300: #bcb7ab;
--color-whitewashed-fence-400: #a59e90;
--color-whitewashed-fence-500: #8d8576;
--color-whitewashed-fence-600: #777164;
--color-whitewashed-fence-700: #605a50;
--color-whitewashed-fence-800: #46423a;
--color-whitewashed-fence-900: #312d28;
--color-whitewashed-fence-950: #1d1a16;
}SCSS
$whitewashed-fence: #faf2e3;
$whitewashed-fence-rgb: 250, 242, 227;
$whitewashed-fence-light: mix(#fff, $whitewashed-fence, 20%);
$whitewashed-fence-dark: mix(#000, $whitewashed-fence, 20%);
.element {
color: $whitewashed-fence;
box-shadow: 0 0 0 2px rgba($whitewashed-fence, 0.35);
}