Named color · #EDE7D5
Board & Batten
Board & Batten is #EDE7D5: rgb(237 231 213), hsl(45 40% 88%), oklch(0.928 0.025 91.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Board & Batten color name →
#EDE7D5
oklch(0.928 0.025 91.6)
Color conversions
- HEX
- #ede7d5
- RGB
- rgb(237 231 213)
- HSL
- hsl(45 40% 88%)
- HWB
- hwb(45 84% 7%)
- OKLCH
- oklch(0.928 0.025 91.6)
- OKLab
- oklab(0.928 -0.001 0.025)
- CIE Lab
- lab(91.76 -0.15 9.56)
- LCH
- lch(91.76 9.56 90.9)
- CMYK
- cmyk(0% 3% 10% 7%)
Tints · Shades · Tones
Tints
- EFE9D9
- F1ECDD
- F2EEE2
- F4F1E6
- F6F3EA
- F8F5EE
- FAF8F2
- FBFAF7
- FDFDFB
Shades
- CEC9B9
- B0AB9E
- 938F83
- 77736A
- 5C5951
- 42403A
- 2A2824
- 141310
- 030302
Tones
- E2DCCC
- D6D2C3
- CBC7BB
- C0BDB2
- B5B2AA
- AAA8A1
- 9F9E99
- 959490
- 8A8A88
Color harmonies
Complementary +180°
- EDE7D5
Board & Batten
- E1E7F8
≈ Glitter
Analogous -30° +30°
- EDE7D5
Board & Batten
- F4E4D7
≈ China Doll
- E4EAD8
≈ Homoeopathic Mint
Triadic +120° +240°
- EDE7D5
Board & Batten
- D5ECF1
≈ Sparkling River
- F2E1EF
≈ Taffeta Tint
Split-complementary +150° +210°
- EDE7D5
Board & Batten
- D9EAF7
≈ Celestial Cathedral
- EAE4F5
≈ Sheer Lavender
Tetradic +90° +180° +270°
- EDE7D5
Board & Batten
- D6EDE8
≈ Dew Pointe
- E1E7F8
≈ Glitter
- F6E1E6
≈ Poetic Princess
Contrast & accessibility
Ag
FailOn white
WCAG 1.23:1 · APCA Lc 12
Ag
AAAOn black
WCAG 16.99:1 · APCA Lc 92
Best text color: #000000
WCAG 16.99:1 (AAA) · APCA Lc 92
Contrast pairs
Code snippets
CSS
:root {
--board-batten: #ede7d5;
--board-batten-rgb: 237 231 213;
--board-batten-oklch: oklch(0.928 0.025 91.6);
}
.element {
color: var(--board-batten);
background-color: hsl(45 40% 88%);
border-color: oklch(0.928 0.025 91.6);
}Tailwind CSS v4
@theme {
--color-board-batten: #ede7d5;
--color-board-batten-50: #f7f5ed;
--color-board-batten-100: #eae8df;
--color-board-batten-200: #d8d4c9;
--color-board-batten-300: #bbb7a9;
--color-board-batten-400: #a49e8e;
--color-board-batten-500: #8c8674;
--color-board-batten-600: #767162;
--color-board-batten-700: #5f5b4e;
--color-board-batten-800: #464239;
--color-board-batten-900: #302e27;
--color-board-batten-950: #1c1a15;
}SCSS
$board-batten: #ede7d5;
$board-batten-rgb: 237, 231, 213;
$board-batten-light: mix(#fff, $board-batten, 20%);
$board-batten-dark: mix(#000, $board-batten, 20%);
.element {
color: $board-batten;
box-shadow: 0 0 0 2px rgba($board-batten, 0.35);
}