Named color · #613521
Chubby Chocolate
Chubby Chocolate is #613521: rgb(97 53 33), hsl(19 49% 25%), oklch(0.38 0.071 44.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Chubby Chocolate color name →
#613521
oklch(0.38 0.071 44.5)
Color conversions
- HEX
- #613521
- RGB
- rgb(97 53 33)
- HSL
- hsl(19 49% 25%)
- HWB
- hwb(19 13% 62%)
- OKLCH
- oklch(0.38 0.071 44.5)
- OKLab
- oklab(0.38 0.05 0.05)
- CIE Lab
- lab(27.58 18.72 21.43)
- LCH
- lch(27.58 28.46 48.9)
- CMYK
- cmyk(0% 45% 66% 62%)
Tints · Shades · Tones
Tints
- 714735
- 805A4A
- 906D5E
- 9F8174
- AF958A
- BFA9A0
- CFBEB7
- DFD3CF
- EFE9E7
Shades
- 532D1B
- 462516
- 391D10
- 2D150B
- 210E06
- 150803
- 0B0301
- 030100
- 000000
Tones
- 653D2B
- 684434
- 6C4B3D
- 6F5347
- 725A50
- 75625A
- 786963
- 7B716D
- 7D7876
Color harmonies
Complementary +180°
- 613521
Chubby Chocolate
- 024A5E
≈ Stegadon Scale Green
Analogous -30° +30°
- 613521
Chubby Chocolate
- 623136
≈ Chocolate Truffle
- 583C0F
≈ Pineapple
Triadic +120° +240°
- 613521
Chubby Chocolate
- 134E38
≈ Raspberry Leaf Green
- 3E3C66
≈ Storm Is Coming
Split-complementary +150° +210°
- 613521
Chubby Chocolate
- 004D4D
≈ Dark Teal
- 274367
≈ Black Turmeric
Tetradic +90° +180° +270°
- 613521
Chubby Chocolate
- 324A22
≈ Treetop Cathedral
- 024A5E
≈ Stegadon Scale Green
- 50365C
≈ Blackberry Cordial
Contrast & accessibility
Ag
AAAOn white
WCAG 10.29:1 · APCA Lc 94
Ag
FailOn black
WCAG 2.03:1 · APCA Lc 9
Best text color: #FFFFFF
WCAG 10.29:1 (AAA) · APCA Lc 94
Contrast pairs
Code snippets
CSS
:root {
--chubby-chocolate: #613521;
--chubby-chocolate-rgb: 97 53 33;
--chubby-chocolate-oklch: oklch(0.38 0.071 44.5);
}
.element {
color: var(--chubby-chocolate);
background-color: hsl(19 49% 25%);
border-color: oklch(0.38 0.071 44.5);
}Tailwind CSS v4
@theme {
--color-chubby-chocolate: #613521;
--color-chubby-chocolate-50: #fff0e4;
--color-chubby-chocolate-100: #fde1d4;
--color-chubby-chocolate-200: #efccbb;
--color-chubby-chocolate-300: #d7ad99;
--color-chubby-chocolate-400: #c3927c;
--color-chubby-chocolate-500: #ae775f;
--color-chubby-chocolate-600: #936551;
--color-chubby-chocolate-700: #765140;
--color-chubby-chocolate-800: #573a2f;
--color-chubby-chocolate-900: #3d2820;
--color-chubby-chocolate-950: #26160f;
}SCSS
$chubby-chocolate: #613521;
$chubby-chocolate-rgb: 97, 53, 33;
$chubby-chocolate-light: mix(#fff, $chubby-chocolate, 20%);
$chubby-chocolate-dark: mix(#000, $chubby-chocolate, 20%);
.element {
color: $chubby-chocolate;
box-shadow: 0 0 0 2px rgba($chubby-chocolate, 0.35);
}