最接近的命名颜色 · #BA8DAD
#BA8DAD
最接近的命名颜色: Mauve Magic
#BA8DAD（rgb(186 141 173)、hsl(317 25% 64%)、oklch(0.696 0.069 337.2)）最接近命名颜色 Mauve Magic。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#BA8DAD
oklch(0.696 0.069 337.2)
颜色转换
- HEX
- #ba8dad
- RGB
- rgb(186 141 173)
- HSL
- hsl(317 25% 64%)
- HWB
- hwb(317 55% 27%)
- OKLCH
- oklch(0.696 0.069 337.2)
- OKLab
- oklab(0.696 0.064 -0.027)
- CIE Lab
- lab(63.8 21.49 -9.94)
- LCH
- lch(63.8 23.68 335.2)
- CMYK
- cmyk(0% 24% 7% 27%)
浅色调 · 深色调 · 灰色调
浅色调
- C198B5
- C8A3BD
- CFAEC5
- D6BACD
- DDC5D5
- E4D0DE
- EBDCE6
- F1E8EE
- F8F3F7
深色调
- A17A96
- 89677F
- 72556A
- 5C4455
- 463341
- 32232D
- 1E141B
- 0D070B
- 020101
灰色调
- B48CA8
- AE8BA4
- A9899F
- A3889B
- 9D8796
- 978692
- 92848D
- 8C8389
- 868184
配色和谐
互补色 +180°
- BA8DAD
Mauve Magic
- 79AB8C
≈ Melon Green
类似色 -30° +30°
- BA8DAD
Mauve Magic
- A992BF
≈ Enchanted Lilac
- C48C96
≈ Solid Pink
三角配色 +120° +240°
- BA8DAD
Mauve Magic
- A99E6B
≈ Whispering Grasslands
- 69A8BA
≈ Blue Chiffon
分裂互补色 +150° +210°
- BA8DAD
Mauve Magic
- 91A677
≈ Luscious Lime
- 68ACA4
≈ Turquoise Fantasies
四角配色 +90° +180° +270°
- BA8DAD
Mauve Magic
- BB956F
≈ Painted Pony
- 79AB8C
≈ Melon Green
- 7AA2C7
≈ Shipmate
对比度与无障碍
Ag
Fail白底
WCAG 2.79:1 · APCA Lc 54
Ag
AAA黑底
WCAG 7.50:1 · APCA Lc 48
最佳文字颜色: #000000
WCAG 7.50:1 (AAA) · APCA Lc 48
Contrast pairs
代码片段
CSS
:root {
--mauve-magic: #ba8dad;
--mauve-magic-rgb: 186 141 173;
--mauve-magic-oklch: oklch(0.696 0.069 337.2);
}
.element {
color: var(--mauve-magic);
background-color: hsl(317 25% 64%);
border-color: oklch(0.696 0.069 337.2);
}Tailwind CSS v4
@theme {
--color-mauve-magic: #ba8dad;
--color-mauve-magic-50: #ffeefc;
--color-mauve-magic-100: #f9dff0;
--color-mauve-magic-200: #e9c9de;
--color-mauve-magic-300: #d0aac3;
--color-mauve-magic-400: #ba8fad;
--color-mauve-magic-500: #a47497;
--color-mauve-magic-600: #8b6380;
--color-mauve-magic-700: #6f4f66;
--color-mauve-magic-800: #52394c;
--color-mauve-magic-900: #392735;
--color-mauve-magic-950: #231520;
}SCSS
$mauve-magic: #ba8dad;
$mauve-magic-rgb: 186, 141, 173;
$mauve-magic-light: mix(#fff, $mauve-magic, 20%);
$mauve-magic-dark: mix(#000, $mauve-magic, 20%);
.element {
color: $mauve-magic;
box-shadow: 0 0 0 2px rgba($mauve-magic, 0.35);
}