命名颜色 · #5F1933
Brown Chocolate
Brown Chocolate 即 #5F1933：rgb(95 25 51)、hsl(338 58% 24%)、oklch(0.336 0.104 1.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Brown Chocolate color name →
#5F1933
oklch(0.336 0.104 1.8)
颜色转换
- HEX
- #5f1933
- RGB
- rgb(95 25 51)
- HSL
- hsl(338 58% 24%)
- HWB
- hwb(338 10% 63%)
- OKLCH
- oklch(0.336 0.104 1.8)
- OKLab
- oklab(0.336 0.104 0.003)
- CIE Lab
- lab(21.74 33.66 1.75)
- LCH
- lch(21.74 33.71 3)
- CMYK
- cmyk(0% 74% 46% 63%)
浅色调 · 深色调 · 灰色调
浅色调
- 703045
- 804657
- 915B6A
- A1717E
- B18892
- C19FA7
- D0B6BC
- E0CED2
- F0E6E8
深色调
- 52142B
- 441023
- 380B1C
- 2C0714
- 20040D
- 150207
- 0A0103
- 030001
- 000000
灰色调
- 64253A
- 683041
- 6C3A49
- 704450
- 734E58
- 765860
- 796268
- 7C6C70
- 7E7678
配色和谐
互补色 +180°
- 5F1933
Brown Chocolate
- 004139
≈ Botanical Night
类似色 -30° +30°
- 5F1933
Brown Chocolate
- 541E4E
≈ Violet Carmine
- 621B10
≈ Altar Wine
三角配色 +120° +240°
- 5F1933
Brown Chocolate
- 303D00
≈ Dark Olive
- 003B5C
≈ Poseidon
分裂互补色 +150° +210°
- 5F1933
Brown Chocolate
- 00431E
≈ Deep Pond
- 003F48
≈ Ghostlands Coal
四角配色 +90° +180° +270°
- 5F1933
Brown Chocolate
- 443500
≈ Night in the Woods
- 004139
≈ Botanical Night
- 25306C
≈ Blue Rose
对比度与无障碍
Ag
AAA白底
WCAG 12.54:1 · APCA Lc 98
Ag
Fail黑底
WCAG 1.67:1 · APCA Lc 0
最佳文字颜色: #FFFFFF
WCAG 12.54:1 (AAA) · APCA Lc 98
Contrast pairs
代码片段
CSS
:root {
--brown-chocolate: #5f1933;
--brown-chocolate-rgb: 95 25 51;
--brown-chocolate-oklch: oklch(0.336 0.104 1.8);
}
.element {
color: var(--brown-chocolate);
background-color: hsl(338 58% 24%);
border-color: oklch(0.336 0.104 1.8);
}Tailwind CSS v4
@theme {
--color-brown-chocolate: #5f1933;
--color-brown-chocolate-50: #ffeaf2;
--color-brown-chocolate-100: #ffdae4;
--color-brown-chocolate-200: #fcc2cf;
--color-brown-chocolate-300: #e5a1b1;
--color-brown-chocolate-400: #d1849a;
--color-brown-chocolate-500: #be6781;
--color-brown-chocolate-600: #a0586d;
--color-brown-chocolate-700: #814657;
--color-brown-chocolate-800: #5f3241;
--color-brown-chocolate-900: #43222d;
--color-brown-chocolate-950: #2b111a;
}SCSS
$brown-chocolate: #5f1933;
$brown-chocolate-rgb: 95, 25, 51;
$brown-chocolate-light: mix(#fff, $brown-chocolate, 20%);
$brown-chocolate-dark: mix(#000, $brown-chocolate, 20%);
.element {
color: $brown-chocolate;
box-shadow: 0 0 0 2px rgba($brown-chocolate, 0.35);
}