Named color · #773333
Chocolate Bar
Chocolate Bar is #773333: rgb(119 51 51), hsl(0 40% 33%), oklch(0.414 0.096 22.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Chocolate Bar color name →
#773333
oklch(0.414 0.096 22.1)
Color conversions
- HEX
- #773333
- RGB
- rgb(119 51 51)
- HSL
- hsl(0 40% 33%)
- HWB
- hwb(0 20% 53%)
- OKLCH
- oklch(0.414 0.096 22.1)
- OKLab
- oklab(0.414 0.089 0.036)
- CIE Lab
- lab(31.06 30.42 15.31)
- LCH
- lch(31.06 34.06 26.7)
- CMYK
- cmyk(0% 57% 57% 53%)
Tints · Shades · Tones
Tints
- 854645
- 945A58
- A26D6B
- AF817F
- BD9593
- CAAAA8
- D8BFBD
- E5D4D3
- F2E9E9
Shades
- 672B2B
- 572323
- 471C1C
- 381414
- 2A0D0D
- 1C0707
- 100303
- 050101
- 010000
Tones
- 793B3A
- 7B4342
- 7C4B4A
- 7E5351
- 7F5B59
- 7F6260
- 806A68
- 807170
- 807978
Color harmonies
Complementary +180°
- 773333
Chocolate Bar
- 00565C
≈ Deep Teal
Analogous -30° +30°
- 773333
Chocolate Bar
- 713351
≈ Burlat Red
- 733A0F
≈ Philippine Bronze
Triadic +120° +240°
- 773333
Chocolate Bar
- 295825
≈ Crusoe
- 2E4A7F
≈ Nautical
Split-complementary +150° +210°
- 773333
Chocolate Bar
- 005947
≈ Forest Shadows
- 005371
≈ Night Kite
Tetradic +90° +180° +270°
- 773333
Chocolate Bar
- 4D5000
≈ Scorzonera Brown
- 00565C
≈ Deep Teal
- 4D407B
≈ Fresh Eggplant
Contrast & accessibility
Ag
AAAOn white
WCAG 9.10:1 · APCA Lc 90
Ag
FailOn black
WCAG 2.30:1 · APCA Lc 12
Best text color: #FFFFFF
WCAG 9.10:1 (AAA) · APCA Lc 90
Contrast pairs
Code snippets
CSS
:root {
--chocolate-bar: #773333;
--chocolate-bar-rgb: 119 51 51;
--chocolate-bar-oklch: oklch(0.414 0.096 22.1);
}
.element {
color: var(--chocolate-bar);
background-color: hsl(0 40% 33%);
border-color: oklch(0.414 0.096 22.1);
}Tailwind CSS v4
@theme {
--color-chocolate-bar: #773333;
--color-chocolate-bar-50: #ffebe8;
--color-chocolate-bar-100: #ffdcd8;
--color-chocolate-bar-200: #fbc5c0;
--color-chocolate-bar-300: #e5a59f;
--color-chocolate-bar-400: #d18885;
--color-chocolate-bar-500: #bd6b69;
--color-chocolate-bar-600: #a05b59;
--color-chocolate-bar-700: #804947;
--color-chocolate-bar-800: #5f3434;
--color-chocolate-bar-900: #432424;
--color-chocolate-bar-950: #2b1213;
}SCSS
$chocolate-bar: #773333;
$chocolate-bar-rgb: 119, 51, 51;
$chocolate-bar-light: mix(#fff, $chocolate-bar, 20%);
$chocolate-bar-dark: mix(#000, $chocolate-bar, 20%);
.element {
color: $chocolate-bar;
box-shadow: 0 0 0 2px rgba($chocolate-bar, 0.35);
}