Named color · #BDB98F
Back to Nature
Back to Nature is #BDB98F: rgb(189 185 143), hsl(55 26% 65%), oklch(0.778 0.057 103.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Back to Nature color name →
#BDB98F
oklch(0.778 0.057 103.1)
Color conversions
- HEX
- #bdb98f
- RGB
- rgb(189 185 143)
- HSL
- hsl(55 26% 65%)
- HWB
- hwb(55 56% 26%)
- OKLCH
- oklch(0.778 0.057 103.1)
- OKLab
- oklab(0.778 -0.013 0.055)
- CIE Lab
- lab(74.68 -3.58 21.95)
- LCH
- lch(74.68 22.24 99.3)
- CMYK
- cmyk(0% 2% 24% 26%)
Tints · Shades · Tones
Tints
- C3C09A
- CAC7A5
- D0CEB0
- D7D5BB
- DDDCC6
- E4E3D2
- EBEADD
- F1F1E8
- F8F8F4
Shades
- A4A07C
- 8C8969
- 747157
- 5D5B45
- 474634
- 333124
- 1F1E15
- 0D0D07
- 020201
Tones
- B7B38E
- B0AD8C
- AAA88B
- A4A28A
- 9E9C88
- 989687
- 929185
- 8C8B83
- 868682
Color harmonies
Complementary +180°
- BDB98F
Back to Nature
- B1B3DB
≈ Beloved
Analogous -30° +30°
- BDB98F
Back to Nature
- CEB28F
≈ Moraine
- A9BF9A
≈ Rolling Glen
Triadic +120° +240°
- BDB98F
Back to Nature
- 8FC0D2
≈ Eastern Sky
- D2A9C0
≈ Heart to Heart
Split-complementary +150° +210°
- BDB98F
Back to Nature
- 9EBADB
≈ Wings of Pegasus
- C4ADD1
≈ Meadow Thistle
Tetradic +90° +180° +270°
- BDB98F
Back to Nature
- 8CC3C1
≈ Cabana Bay
- B1B3DB
≈ Beloved
- D9A9AC
≈ Silver Pink
Contrast & accessibility
Ag
FailOn white
WCAG 2.00:1 · APCA Lc 39
Ag
AAAOn black
WCAG 10.49:1 · APCA Lc 64
Best text color: #000000
WCAG 10.49:1 (AAA) · APCA Lc 64
Contrast pairs
Code snippets
CSS
:root {
--back-to-nature: #bdb98f;
--back-to-nature-rgb: 189 185 143;
--back-to-nature-oklch: oklch(0.778 0.057 103.1);
}
.element {
color: var(--back-to-nature);
background-color: hsl(55 26% 65%);
border-color: oklch(0.778 0.057 103.1);
}Tailwind CSS v4
@theme {
--color-back-to-nature: #bdb98f;
--color-back-to-nature-50: #f7f6e4;
--color-back-to-nature-100: #eae9d4;
--color-back-to-nature-200: #d7d6ba;
--color-back-to-nature-300: #bbba98;
--color-back-to-nature-400: #a4a079;
--color-back-to-nature-500: #8d885c;
--color-back-to-nature-600: #77734e;
--color-back-to-nature-700: #5f5c3e;
--color-back-to-nature-800: #46432c;
--color-back-to-nature-900: #312e1e;
--color-back-to-nature-950: #1d1b0e;
}SCSS
$back-to-nature: #bdb98f;
$back-to-nature-rgb: 189, 185, 143;
$back-to-nature-light: mix(#fff, $back-to-nature, 20%);
$back-to-nature-dark: mix(#000, $back-to-nature, 20%);
.element {
color: $back-to-nature;
box-shadow: 0 0 0 2px rgba($back-to-nature, 0.35);
}