Named color · #BA843C
Amber Essence
Amber Essence is #BA843C: rgb(186 132 60), hsl(34 51% 48%), oklch(0.653 0.11 71.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Amber Essence color name →
#BA843C
oklch(0.653 0.11 71.4)
Color conversions
- HEX
- #ba843c
- RGB
- rgb(186 132 60)
- HSL
- hsl(34 51% 48%)
- HWB
- hwb(34 24% 27%)
- OKLCH
- oklch(0.653 0.11 71.4)
- OKLab
- oklab(0.653 0.035 0.105)
- CIE Lab
- lab(59.65 16.23 46.27)
- LCH
- lch(59.65 49.03 70.7)
- CMYK
- cmyk(0% 29% 68% 27%)
Tints · Shades · Tones
Tints
- C19052
- C89C66
- CFA97A
- D6B58D
- DDC1A0
- E4CDB3
- EBDAC6
- F2E6D9
- F8F2EC
Shades
- A17233
- 89602A
- 724F21
- 5C3F19
- 462F11
- 32200A
- 1E1204
- 0D0601
- 020100
Tones
- B48446
- AF844E
- A98456
- A3835D
- 9E8363
- 98836A
- 928270
- 8C8175
- 86817B
Color harmonies
Complementary +180°
- BA843C
Amber Essence
- 5B94D1
≈ Winter Lake
Analogous -30° +30°
- BA843C
Amber Essence
- C97859
≈ Nicotine Glaze
- 9E9239
≈ Gecko
Triadic +120° +240°
- BA843C
Amber Essence
- 0FA5A1
≈ Royal Cloak
- A67CC1
≈ Wisteria
Split-complementary +150° +210°
- BA843C
Amber Essence
- 289FC0
≈ Blue Horizon
- 8587D2
≈ Indigo Bloom
Tetradic +90° +180° +270°
- BA843C
Amber Essence
- 47A57B
≈ Shamrock Green
- 5B94D1
≈ Winter Lake
- BE74A4
≈ Crocus
Contrast & accessibility
Ag
FailOn white
WCAG 3.25:1 · APCA Lc 60
Ag
AAOn black
WCAG 6.45:1 · APCA Lc 42
Best text color: #000000
WCAG 6.45:1 (AA) · APCA Lc 42
Contrast pairs
Code snippets
CSS
:root {
--amber-essence: #ba843c;
--amber-essence-rgb: 186 132 60;
--amber-essence-oklch: oklch(0.653 0.11 71.4);
}
.element {
color: var(--amber-essence);
background-color: hsl(34 51% 48%);
border-color: oklch(0.653 0.11 71.4);
}Tailwind CSS v4
@theme {
--color-amber-essence: #ba843c;
--color-amber-essence-50: #fff1d3;
--color-amber-essence-100: #ffe3c0;
--color-amber-essence-200: #f1cea0;
--color-amber-essence-300: #daaf77;
--color-amber-essence-400: #c79350;
--color-amber-essence-500: #b37821;
--color-amber-essence-600: #97661f;
--color-amber-essence-700: #795119;
--color-amber-essence-800: #5b3b10;
--color-amber-essence-900: #3f280a;
--color-amber-essence-950: #281600;
}SCSS
$amber-essence: #ba843c;
$amber-essence-rgb: 186, 132, 60;
$amber-essence-light: mix(#fff, $amber-essence, 20%);
$amber-essence-dark: mix(#000, $amber-essence, 20%);
.element {
color: $amber-essence;
box-shadow: 0 0 0 2px rgba($amber-essence, 0.35);
}