命名颜色 · #653C4A
Mauve Wine
Mauve Wine 即 #653C4A：rgb(101 60 74)、hsl(340 25% 32%)、oklch(0.41 0.061 358.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Brown mean? → · Mauve Wine color name →
#653C4A
oklch(0.41 0.061 358.1)
颜色转换
- HEX
- #653c4a
- RGB
- rgb(101 60 74)
- HSL
- hsl(340 25% 32%)
- HWB
- hwb(340 24% 60%)
- OKLCH
- oklch(0.41 0.061 358.1)
- OKLab
- oklab(0.41 0.061 -0.002)
- CIE Lab
- lab(30.76 20.05 -0.52)
- LCH
- lch(30.76 20.06 358.5)
- CMYK
- cmyk(0% 41% 27% 60%)
浅色调 · 深色调 · 灰色调
浅色调
- 744E5A
- 83606B
- 92727C
- A1858E
- B198A0
- C0ACB2
- D0C0C5
- DFD5D8
- EFEAEB
深色调
- 57333F
- 492A35
- 3C212A
- 2F1920
- 221117
- 170A0E
- 0C0406
- 030102
- 000000
灰色调
- 68434F
- 6B4954
- 6E505A
- 71575F
- 745E64
- 76646A
- 796B6F
- 7B7275
- 7E797A
配色和谐
互补色 +180°
- 653C4A
Mauve Wine
- 1E554A
≈ Bagpiper
类似色 -30° +30°
- 653C4A
Mauve Wine
- 5C3E5B
≈ Blackberry Wine
- 673D38
≈ Chipotle Paste
三角配色 +120° +240°
- 653C4A
Mauve Wine
- 474F27
≈ Bronze Tone
- 284F67
≈ Singing the Blues
分裂互补色 +150° +210°
- 653C4A
Mauve Wine
- 325337
≈ Goblin
- 18535C
≈ Recollection Blue
四角配色 +90° +180° +270°
- 653C4A
Mauve Wine
- 584820
≈ Bronze Olive
- 1E554A
≈ Bagpiper
- 3C496C
≈ Egyptian Violet
对比度与无障碍
Ag
AAA白底
WCAG 9.13:1 · APCA Lc 91
Ag
Fail黑底
WCAG 2.29:1 · APCA Lc 11
最佳文字颜色: #FFFFFF
WCAG 9.13:1 (AAA) · APCA Lc 91
Contrast pairs
代码片段
CSS
:root {
--mauve-wine: #653c4a;
--mauve-wine-rgb: 101 60 74;
--mauve-wine-oklch: oklch(0.41 0.061 358.1);
}
.element {
color: var(--mauve-wine);
background-color: hsl(340 25% 32%);
border-color: oklch(0.41 0.061 358.1);
}Tailwind CSS v4
@theme {
--color-mauve-wine: #653c4a;
--color-mauve-wine-50: #ffeef4;
--color-mauve-wine-100: #fae0e7;
--color-mauve-wine-200: #eccad3;
--color-mauve-wine-300: #d3abb6;
--color-mauve-wine-400: #bd909e;
--color-mauve-wine-500: #a87586;
--color-mauve-wine-600: #8e6471;
--color-mauve-wine-700: #72505b;
--color-mauve-wine-800: #543a43;
--color-mauve-wine-900: #3a282e;
--color-mauve-wine-950: #24161b;
}SCSS
$mauve-wine: #653c4a;
$mauve-wine-rgb: 101, 60, 74;
$mauve-wine-light: mix(#fff, $mauve-wine, 20%);
$mauve-wine-dark: mix(#000, $mauve-wine, 20%);
.element {
color: $mauve-wine;
box-shadow: 0 0 0 2px rgba($mauve-wine, 0.35);
}