Named color · #BA8F68
Tropical Wood
Tropical Wood is #BA8F68: rgb(186 143 104), hsl(29 37% 57%), oklch(0.682 0.075 63.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Tropical Wood color name →
#BA8F68
oklch(0.682 0.075 63.3)
Color conversions
- HEX
- #ba8f68
- RGB
- rgb(186 143 104)
- HSL
- hsl(29 37% 57%)
- HWB
- hwb(29 41% 27%)
- OKLCH
- oklch(0.682 0.075 63.3)
- OKLab
- oklab(0.682 0.034 0.067)
- CIE Lab
- lab(62.89 13.09 27.35)
- LCH
- lch(62.89 30.32 64.4)
- CMYK
- cmyk(0% 23% 44% 27%)
Tints · Shades · Tones
Tints
- C19A77
- C8A586
- CFB094
- D6BBA3
- DDC6B2
- E4D1C1
- EBDDD1
- F1E8E0
- F8F3EF
Shades
- A17C59
- 89694B
- 72573E
- 5C4530
- 463424
- 322418
- 1E150C
- 0D0704
- 020100
Tones
- B48E6B
- AF8C6E
- A98B70
- A38973
- 9D8875
- 978678
- 92857A
- 8C837C
- 86827E
Color harmonies
Complementary +180°
- BA8F68
Tropical Wood
- 709EC4
≈ Blue Promise
Analogous -30° +30°
- BA8F68
Tropical Wood
- C2887B
≈ Whisky
- A89862
≈ Wistman’s Wood
Triadic +120° +240°
- BA8F68
Tropical Wood
- 60A89D
≈ Dragon Bay
- A28EBF
≈ Lilac Breeze
Split-complementary +150° +210°
- BA8F68
Tropical Wood
- 5EA5B4
≈ Blue Calypso
- 8996C7
≈ Pale Iris
Tetradic +90° +180° +270°
- BA8F68
Tropical Wood
- 75A783
≈ Green Globe
- 709EC4
≈ Blue Promise
- B588AD
≈ Purple Lepidolite
Contrast & accessibility
Ag
FailOn white
WCAG 2.90:1 · APCA Lc 55
Ag
AAAOn black
WCAG 7.21:1 · APCA Lc 46
Best text color: #000000
WCAG 7.21:1 (AAA) · APCA Lc 46
Contrast pairs
Code snippets
CSS
:root {
--tropical-wood: #ba8f68;
--tropical-wood-rgb: 186 143 104;
--tropical-wood-oklch: oklch(0.682 0.075 63.3);
}
.element {
color: var(--tropical-wood);
background-color: hsl(29 37% 57%);
border-color: oklch(0.682 0.075 63.3);
}Tailwind CSS v4
@theme {
--color-tropical-wood: #ba8f68;
--color-tropical-wood-50: #fff1df;
--color-tropical-wood-100: #fae3ce;
--color-tropical-wood-200: #ebceb3;
--color-tropical-wood-300: #d3b090;
--color-tropical-wood-400: #be9570;
--color-tropical-wood-500: #a97b50;
--color-tropical-wood-600: #8f6845;
--color-tropical-wood-700: #735337;
--color-tropical-wood-800: #553c27;
--color-tropical-wood-900: #3c291a;
--color-tropical-wood-950: #25170b;
}SCSS
$tropical-wood: #ba8f68;
$tropical-wood-rgb: 186, 143, 104;
$tropical-wood-light: mix(#fff, $tropical-wood, 20%);
$tropical-wood-dark: mix(#000, $tropical-wood, 20%);
.element {
color: $tropical-wood;
box-shadow: 0 0 0 2px rgba($tropical-wood, 0.35);
}