Named color · #EBE2CB
Better Than Beige
Better Than Beige is #EBE2CB: rgb(235 226 203), hsl(43 44% 86%), oklch(0.914 0.032 89.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Better Than Beige color name →
#EBE2CB
oklch(0.914 0.032 89.1)
Color conversions
- HEX
- #ebe2cb
- RGB
- rgb(235 226 203)
- HSL
- hsl(43 44% 86%)
- HWB
- hwb(43 80% 8%)
- OKLCH
- oklch(0.914 0.032 89.1)
- OKLab
- oklab(0.914 0 0.032)
- CIE Lab
- lab(90.15 0.36 12.44)
- LCH
- lch(90.15 12.45 88.3)
- CMYK
- cmyk(0% 4% 14% 8%)
Tints · Shades · Tones
Tints
- EDE5D0
- EFE8D5
- F1EBDB
- F3EEE0
- F5F0E5
- F7F3EA
- F9F6EF
- FBF9F5
- FDFCFA
Shades
- CCC4B0
- AEA896
- 918C7D
- 757165
- 5B574D
- 413E37
- 292722
- 13120F
- 030302
Tones
- E0D8C3
- D5CEBC
- CAC4B4
- BFBAAC
- B4B0A5
- A9A69D
- 9F9C96
- 94938F
- 8A8987
Color harmonies
Complementary +180°
- EBE2CB
Better Than Beige
- DAE2F9
≈ Aquarelle Purple
Analogous -30° +30°
- EBE2CB
Better Than Beige
- F4DECE
≈ Siren Song
- E0E6CE
≈ Willow Brook
Triadic +120° +240°
- EBE2CB
Better Than Beige
- CBE9EE
≈ Summer Mist
- EFDBED
≈ Maiden of the Mist
Split-complementary +150° +210°
- EBE2CB
Better Than Beige
- D0E6F6
≈ New Heights
- E5DEF6
≈ Lingering Lilac
Tetradic +90° +180° +270°
- EBE2CB
Better Than Beige
- CDEAE3
≈ Source Blue
- DAE2F9
≈ Aquarelle Purple
- F6DAE2
≈ Columbine
Contrast & accessibility
Ag
FailOn white
WCAG 1.29:1 · APCA Lc 14
Ag
AAAOn black
WCAG 16.27:1 · APCA Lc 89
Best text color: #000000
WCAG 16.27:1 (AAA) · APCA Lc 89
Contrast pairs
Code snippets
CSS
:root {
--better-than-beige: #ebe2cb;
--better-than-beige-rgb: 235 226 203;
--better-than-beige-oklch: oklch(0.914 0.032 89.1);
}
.element {
color: var(--better-than-beige);
background-color: hsl(43 44% 86%);
border-color: oklch(0.914 0.032 89.1);
}Tailwind CSS v4
@theme {
--color-better-than-beige: #ebe2cb;
--color-better-than-beige-50: #f8f5eb;
--color-better-than-beige-100: #ece8dc;
--color-better-than-beige-200: #d9d4c5;
--color-better-than-beige-300: #bdb7a5;
--color-better-than-beige-400: #a69e89;
--color-better-than-beige-500: #8f866e;
--color-better-than-beige-600: #79715e;
--color-better-than-beige-700: #615a4b;
--color-better-than-beige-800: #474236;
--color-better-than-beige-900: #312d25;
--color-better-than-beige-950: #1d1a13;
}SCSS
$better-than-beige: #ebe2cb;
$better-than-beige-rgb: 235, 226, 203;
$better-than-beige-light: mix(#fff, $better-than-beige, 20%);
$better-than-beige-dark: mix(#000, $better-than-beige, 20%);
.element {
color: $better-than-beige;
box-shadow: 0 0 0 2px rgba($better-than-beige, 0.35);
}