Nearest named color · #89473E
#89473E
Nearest named color: Chocolate Explosion
#89473E (rgb(137 71 62), hsl(7 38% 39%), oklch(0.477 0.092 29)) is closest to the named color Chocolate Explosion. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#89473E
oklch(0.477 0.092 29)
Color conversions
- HEX
- #89473e
- RGB
- rgb(137 71 62)
- HSL
- hsl(7 38% 39%)
- HWB
- hwb(7 24% 46%)
- OKLCH
- oklch(0.477 0.092 29)
- OKLab
- oklab(0.477 0.08 0.044)
- CIE Lab
- lab(38.51 28 18.7)
- LCH
- lch(38.51 33.67 33.7)
- CMYK
- cmyk(0% 48% 55% 46%)
Tints · Shades · Tones
Tints
- 965950
- A26A62
- AE7C74
- BA8E87
- C6A09A
- D1B3AD
- DDC5C1
- E8D8D6
- F4ECEA
Shades
- 763D35
- 64322B
- 532823
- 421F1A
- 311612
- 220D0A
- 140604
- 070201
- 010000
Tones
- 894D45
- 89534B
- 885952
- 885F58
- 87645F
- 866A66
- 85706C
- 847573
- 827B79
Color harmonies
Complementary +180°
- 89473E
Chocolate Explosion
- 006976
≈ Cotton Indigo
Analogous -30° +30°
- 89473E
Chocolate Explosion
- 86455C
≈ Redcurrant
- 824F21
≈ Milk Chocolate
Triadic +120° +240°
- 89473E
Chocolate Explosion
- 336B3F
≈ Arcala Green
- 485A91
≈ Blue Dude
Split-complementary +150° +210°
- 89473E
Chocolate Explosion
- 006C5E
≈ Pacific Queen
- 20638B
≈ Copenhagen Blue
Tetradic +90° +180° +270°
- 89473E
Chocolate Explosion
- 576421
≈ Tabbouleh Green
- 006976
≈ Cotton Indigo
- 645089
≈ Zimidar
Contrast & accessibility
Ag
AAOn white
WCAG 6.92:1 · APCA Lc 84
Ag
FailOn black
WCAG 3.03:1 · APCA Lc 18
Best text color: #FFFFFF
WCAG 6.92:1 (AA) · APCA Lc 84
Contrast pairs
Code snippets
CSS
:root {
--chocolate-explosion: #89473e;
--chocolate-explosion-rgb: 137 71 62;
--chocolate-explosion-oklch: oklch(0.477 0.092 29);
}
.element {
color: var(--chocolate-explosion);
background-color: hsl(7 38% 39%);
border-color: oklch(0.477 0.092 29);
}Tailwind CSS v4
@theme {
--color-chocolate-explosion: #89473e;
--color-chocolate-explosion-50: #ffece5;
--color-chocolate-explosion-100: #ffddd6;
--color-chocolate-explosion-200: #f9c7bd;
--color-chocolate-explosion-300: #e2a69b;
--color-chocolate-explosion-400: #cf8a7f;
--color-chocolate-explosion-500: #bb6e62;
--color-chocolate-explosion-600: #9e5d54;
--color-chocolate-explosion-700: #7f4a43;
--color-chocolate-explosion-800: #5e3531;
--color-chocolate-explosion-900: #422421;
--color-chocolate-explosion-950: #2a1311;
}SCSS
$chocolate-explosion: #89473e;
$chocolate-explosion-rgb: 137, 71, 62;
$chocolate-explosion-light: mix(#fff, $chocolate-explosion, 20%);
$chocolate-explosion-dark: mix(#000, $chocolate-explosion, 20%);
.element {
color: $chocolate-explosion;
box-shadow: 0 0 0 2px rgba($chocolate-explosion, 0.35);
}