Named color · #523B2C
Bonanza
Bonanza is #523B2C: rgb(82 59 44), hsl(24 30% 25%), oklch(0.374 0.041 54.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Bonanza color name →
#523B2C
oklch(0.374 0.041 54.2)
Color conversions
- HEX
- #523b2c
- RGB
- rgb(82 59 44)
- HSL
- hsl(24 30% 25%)
- HWB
- hwb(24 17% 68%)
- OKLCH
- oklch(0.374 0.041 54.2)
- OKLab
- oklab(0.374 0.024 0.033)
- CIE Lab
- lab(27.2 8.84 13.49)
- LCH
- lch(27.2 16.12 56.8)
- CMYK
- cmyk(0% 28% 46% 68%)
Tints · Shades · Tones
Tints
- 624C3F
- 725E52
- 837165
- 94847A
- A5978F
- B6ABA4
- C8C0BA
- DAD4D1
- EDEAE8
Shades
- 463225
- 3B291E
- 2F2117
- 251911
- 1A110A
- 110905
- 080402
- 020101
- 000000
Tones
- 574234
- 5B483C
- 604F44
- 65564D
- 695D55
- 6E645D
- 726B66
- 77726E
- 7B7977
Color harmonies
Complementary +180°
- 523B2C
Bonanza
- 2A4453
≈ Blue Wing Teal
Analogous -30° +30°
- 523B2C
Bonanza
- 553836
≈ Royal Maroon
- 4B3F27
≈ Onion
Triadic +120° +240°
- 523B2C
Bonanza
- 28483F
≈ Gable Green
- 423D54
≈ Artistic Licence
Split-complementary +150° +210°
- 523B2C
Bonanza
- 24474B
≈ Everglade Deck
- 364157
≈ Passionate Blueberry
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 10.39:1 · APCA Lc 94
Ag
FailOn black
WCAG 2.02:1 · APCA Lc 8
Best text color: #FFFFFF
WCAG 10.39:1 (AAA) · APCA Lc 94
Contrast pairs
Code snippets
CSS
:root {
--bonanza: #523b2c;
--bonanza-rgb: 82 59 44;
--bonanza-oklch: oklch(0.374 0.041 54.2);
}
.element {
color: var(--bonanza);
background-color: hsl(24 30% 25%);
border-color: oklch(0.374 0.041 54.2);
}Tailwind CSS v4
@theme {
--color-bonanza: #523b2c;
--color-bonanza-50: #fff2ea;
--color-bonanza-100: #f3e5db;
--color-bonanza-200: #e3d0c4;
--color-bonanza-300: #c8b3a4;
--color-bonanza-400: #b29988;
--color-bonanza-500: #9c7f6d;
--color-bonanza-600: #846c5c;
--color-bonanza-700: #6a564a;
--color-bonanza-800: #4e3f36;
--color-bonanza-900: #362b24;
--color-bonanza-950: #211813;
}SCSS
$bonanza: #523b2c;
$bonanza-rgb: 82, 59, 44;
$bonanza-light: mix(#fff, $bonanza, 20%);
$bonanza-dark: mix(#000, $bonanza, 20%);
.element {
color: $bonanza;
box-shadow: 0 0 0 2px rgba($bonanza, 0.35);
}