Named color · #CBBEAA
Bungalow Beige
Bungalow Beige is #CBBEAA: rgb(203 190 170), hsl(36 24% 73%), oklch(0.807 0.031 78.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Bungalow Beige color name →
#CBBEAA
oklch(0.807 0.031 78.7)
Color conversions
- HEX
- #cbbeaa
- RGB
- rgb(203 190 170)
- HSL
- hsl(36 24% 73%)
- HWB
- hwb(36 67% 20%)
- OKLCH
- oklch(0.807 0.031 78.7)
- OKLab
- oklab(0.807 0.006 0.031)
- CIE Lab
- lab(77.66 2.29 11.88)
- LCH
- lch(77.66 12.1 79.1)
- CMYK
- cmyk(0% 6% 16% 20%)
Tints · Shades · Tones
Tints
- D0C4B2
- D5CBBB
- DAD1C3
- E0D8CB
- E5DED4
- EAE5DC
- EFEBE5
- F4F2EE
- FAF8F6
Shades
- B0A593
- 968C7D
- 7D7568
- 655E53
- 4D483F
- 37332D
- 221F1B
- 0F0D0B
- 020201
Tones
- C3B8A6
- BCB1A2
- B4AB9D
- ACA599
- A59E95
- 9D9891
- 96928D
- 8F8C88
- 878684
Color harmonies
Complementary +180°
- CBBEAA
Bungalow Beige
- B4C1D4
≈ Snow Flurries
Analogous -30° +30°
- CBBEAA
Bungalow Beige
- D2BBAF
≈ Desert Morning
- C1C2AB
≈ Delta Waters
Triadic +120° +240°
- CBBEAA
Bungalow Beige
- AAC6C7
≈ Spring Storm
- C9BACD
≈ Last of the Lilacs
Split-complementary +150° +210°
- CBBEAA
Bungalow Beige
- ACC4D0
≈ Boot Cut
- BFBDD3
≈ Twilight Pearl
Tetradic +90° +180° +270°
- CBBEAA
Bungalow Beige
- ADC7BC
≈ Crystal Oasis
- B4C1D4
≈ Snow Flurries
- D0B8C3
≈ Rose Marble
Contrast & accessibility
Ag
FailOn white
WCAG 1.82:1 · APCA Lc 34
Ag
AAAOn black
WCAG 11.48:1 · APCA Lc 68
Best text color: #000000
WCAG 11.48:1 (AAA) · APCA Lc 68
Contrast pairs
Code snippets
CSS
:root {
--bungalow-beige: #cbbeaa;
--bungalow-beige-rgb: 203 190 170;
--bungalow-beige-oklch: oklch(0.807 0.031 78.7);
}
.element {
color: var(--bungalow-beige);
background-color: hsl(36 24% 73%);
border-color: oklch(0.807 0.031 78.7);
}Tailwind CSS v4
@theme {
--color-bungalow-beige: #cbbeaa;
--color-bungalow-beige-50: #faf4eb;
--color-bungalow-beige-100: #ede7dd;
--color-bungalow-beige-200: #dbd3c6;
--color-bungalow-beige-300: #c0b6a6;
--color-bungalow-beige-400: #a99d8a;
--color-bungalow-beige-500: #92846f;
--color-bungalow-beige-600: #7b705e;
--color-bungalow-beige-700: #63594b;
--color-bungalow-beige-800: #494137;
--color-bungalow-beige-900: #322d25;
--color-bungalow-beige-950: #1e1a14;
}SCSS
$bungalow-beige: #cbbeaa;
$bungalow-beige-rgb: 203, 190, 170;
$bungalow-beige-light: mix(#fff, $bungalow-beige, 20%);
$bungalow-beige-dark: mix(#000, $bungalow-beige, 20%);
.element {
color: $bungalow-beige;
box-shadow: 0 0 0 2px rgba($bungalow-beige, 0.35);
}