命名颜色 · #D473D4
French Mauve
French Mauve 即 #D473D4：rgb(212 115 212)、hsl(300 53% 64%)、oklch(0.698 0.171 327.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Purple mean? → · French Mauve color name →
#D473D4
oklch(0.698 0.171 327.2)
颜色转换
- HEX
- #d473d4
- RGB
- rgb(212 115 212)
- HSL
- hsl(300 53% 64%)
- HWB
- hwb(300 45% 17%)
- OKLCH
- oklch(0.698 0.171 327.2)
- OKLab
- oklab(0.698 0.144 -0.093)
- CIE Lab
- lab(62.45 48.92 -33.53)
- LCH
- lch(62.45 59.31 325.6)
- CMYK
- cmyk(0% 46% 0% 17%)
浅色调 · 深色调 · 灰色调
浅色调
- D982D9
- DE90DD
- E39EE2
- E8ACE6
- ECBAEB
- F0C8EF
- F4D6F3
- F8E4F7
- FCF1FB
深色调
- B863B8
- 9D549D
- 834583
- 693669
- 512851
- 3A1B3A
- 240F24
- 100510
- 020102
灰色调
- CC75CC
- C478C3
- BC79BB
- B37BB2
- AB7CAA
- A37DA2
- 9A7E99
- 927F91
- 898088
配色和谐
互补色 +180°
- D473D4
French Mauve
- 42B95A
≈ Classic Green
类似色 -30° +30°
- D473D4
French Mauve
- AB83F9
≈ Lilac Geode
- EE6A9F
≈ Shark Bait
三角配色 +120° +240°
- D473D4
French Mauve
- C49700
≈ Rapeseed
- 00B2C4
≈ Antigua Blue
分裂互补色 +150° +210°
- D473D4
French Mauve
- 97AA00
≈ Barf Green
- 00B79D
≈ Aare River
四角配色 +90° +180° +270°
- D473D4
French Mauve
- E97D00
≈ Bright Marigold
- 42B95A
≈ Classic Green
- 00AAF0
≈ Vivid Cerulean
对比度与无障碍
Ag
Fail白底
WCAG 2.91:1 · APCA Lc 55
Ag
AAA黑底
WCAG 7.20:1 · APCA Lc 47
最佳文字颜色: #000000
WCAG 7.20:1 (AAA) · APCA Lc 47
Contrast pairs
代码片段
CSS
:root {
--french-mauve: #d473d4;
--french-mauve-rgb: 212 115 212;
--french-mauve-oklch: oklch(0.698 0.171 327.2);
}
.element {
color: var(--french-mauve);
background-color: hsl(300 53% 64%);
border-color: oklch(0.698 0.171 327.2);
}Tailwind CSS v4
@theme {
--color-french-mauve: #d473d4;
--color-french-mauve-50: #ffe4ff;
--color-french-mauve-100: #ffd4ff;
--color-french-mauve-200: #fdbaf8;
--color-french-mauve-300: #e796e2;
--color-french-mauve-400: #d276d2;
--color-french-mauve-500: #bf54bf;
--color-french-mauve-600: #a148a2;
--color-french-mauve-700: #813a82;
--color-french-mauve-800: #5f2962;
--color-french-mauve-900: #421c45;
--color-french-mauve-950: #2b0b2d;
}SCSS
$french-mauve: #d473d4;
$french-mauve-rgb: 212, 115, 212;
$french-mauve-light: mix(#fff, $french-mauve, 20%);
$french-mauve-dark: mix(#000, $french-mauve, 20%);
.element {
color: $french-mauve;
box-shadow: 0 0 0 2px rgba($french-mauve, 0.35);
}