命名颜色 · #3F2F31
Chocolate Plum
Chocolate Plum 即 #3F2F31：rgb(63 47 49)、hsl(353 15% 22%)、oklch(0.324 0.024 10.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Chocolate Plum color name →
#3F2F31
oklch(0.324 0.024 10.1)
颜色转换
- 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%)
浅色调 · 深色调 · 灰色调
浅色调
- 504143
- 625455
- 746769
- 877B7C
- 9A9091
- ADA5A6
- C1BBBC
- D5D1D2
- EAE8E8
深色调
- 352729
- 2C2022
- 23191A
- 1B1213
- 120C0C
- 0A0606
- 040303
- 010101
- 000000
灰色调
- 453738
- 4C3E40
- 524647
- 584E4F
- 5F5657
- 655E5F
- 6C6667
- 736F6F
- 797778
配色和谐
互补色 +180°
- 3F2F31
Chocolate Plum
- 263836
≈ Tetsuonando Black
类似色 -30° +30°
- 3F2F31
Chocolate Plum
- 3C2F38
≈ Disappearing Purple
- 3F302B
≈ Chinese Ink
三角配色 +120° +240°
- 3F2F31
Chocolate Plum
- 30362A
≈ Aimiru Brown
- 2B3540
≈ Anchorman
分裂互补色 +150° +210°
- 3F2F31
Chocolate Plum
- 293830
≈ Aimiru Brown
- 26373C
≈ Petrol Slumber
四角配色 +90° +180° +270°
- 3F2F31
Chocolate Plum
- 363426
≈ Graphite
- 263836
≈ Tetsuonando Black
- 313340
≈ Parisian Night
对比度与无障碍
Ag
AAA白底
WCAG 12.63:1 · APCA Lc 99
Ag
Fail黑底
WCAG 1.66:1 · APCA Lc 0
最佳文字颜色: #FFFFFF
WCAG 12.63:1 (AAA) · APCA Lc 99
Contrast pairs
代码片段
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);
}