Named color · #3F2F31
Chocolate Plum
Chocolate Plum is #3F2F31: rgb(63 47 49), hsl(353 15% 22%), oklch(0.324 0.024 10.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Chocolate Plum color name →
#3F2F31
oklch(0.324 0.024 10.1)
Color conversions
- HEX
- #3f2f31
- RGB
- rgb(63 47 49)
- HSL
- hsl(353 15% 22%)
- HWB
- hwb(353 18% 75%)
- OKLCH
- oklch(0.324 0.024 10.1)
- OKLab
- oklab(0.324 0.023 0.004)
- CIE Lab
- lab(21.32 7.81 1.68)
- LCH
- lch(21.32 7.99 12.1)
- CMYK
- cmyk(0% 25% 22% 75%)
Tints · Shades · Tones
Tints
- 504143
- 625455
- 746769
- 877B7C
- 9A9091
- ADA5A6
- C1BBBC
- D5D1D2
- EAE8E8
Shades
- 352729
- 2C2022
- 23191A
- 1B1213
- 120C0C
- 0A0606
- 040303
- 010101
- 000000
Tones
- 453738
- 4C3E40
- 524647
- 584E4F
- 5F5657
- 655E5F
- 6C6667
- 736F6F
- 797778
Color harmonies
Complementary +180°
- 3F2F31
Chocolate Plum
- 263836
≈ Tetsuonando Black
Analogous -30° +30°
- 3F2F31
Chocolate Plum
- 3C2F38
≈ Disappearing Purple
- 3F302B
≈ Chinese Ink
Triadic +120° +240°
- 3F2F31
Chocolate Plum
- 30362A
≈ Aimiru Brown
- 2B3540
≈ Anchorman
Split-complementary +150° +210°
- 3F2F31
Chocolate Plum
- 293830
≈ Aimiru Brown
- 26373C
≈ Petrol Slumber
Tetradic +90° +180° +270°
- 3F2F31
Chocolate Plum
- 363426
≈ Graphite
- 263836
≈ Tetsuonando Black
- 313340
≈ Parisian Night
Contrast & accessibility
Ag
AAAOn white
WCAG 12.63:1 · APCA Lc 99
Ag
FailOn black
WCAG 1.66:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 12.63:1 (AAA) · APCA Lc 99
Contrast pairs
Code snippets
CSS
:root {
--chocolate-plum: #3f2f31;
--chocolate-plum-rgb: 63 47 49;
--chocolate-plum-oklch: oklch(0.324 0.024 10.1);
}
.element {
color: var(--chocolate-plum);
background-color: hsl(353 15% 22%);
border-color: oklch(0.324 0.024 10.1);
}Tailwind CSS v4
@theme {
--color-chocolate-plum: #3f2f31;
--color-chocolate-plum-50: #fcf2f3;
--color-chocolate-plum-100: #f0e5e6;
--color-chocolate-plum-200: #ded0d1;
--color-chocolate-plum-300: #c3b3b4;
--color-chocolate-plum-400: #ac999b;
--color-chocolate-plum-500: #958082;
--color-chocolate-plum-600: #7e6c6e;
--color-chocolate-plum-700: #655758;
--color-chocolate-plum-800: #4a3f41;
--color-chocolate-plum-900: #332b2d;
--color-chocolate-plum-950: #1f191a;
}SCSS
$chocolate-plum: #3f2f31;
$chocolate-plum-rgb: 63, 47, 49;
$chocolate-plum-light: mix(#fff, $chocolate-plum, 20%);
$chocolate-plum-dark: mix(#000, $chocolate-plum, 20%);
.element {
color: $chocolate-plum;
box-shadow: 0 0 0 2px rgba($chocolate-plum, 0.35);
}