Named color · #D473D4
French Mauve
French Mauve is #D473D4: rgb(212 115 212), hsl(300 53% 64%), oklch(0.698 0.171 327.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · French Mauve color name →
#D473D4
oklch(0.698 0.171 327.2)
Color conversions
- 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%)
Tints · Shades · Tones
Tints
- D982D9
- DE90DD
- E39EE2
- E8ACE6
- ECBAEB
- F0C8EF
- F4D6F3
- F8E4F7
- FCF1FB
Shades
- B863B8
- 9D549D
- 834583
- 693669
- 512851
- 3A1B3A
- 240F24
- 100510
- 020102
Tones
- CC75CC
- C478C3
- BC79BB
- B37BB2
- AB7CAA
- A37DA2
- 9A7E99
- 927F91
- 898088
Color harmonies
Complementary +180°
- D473D4
French Mauve
- 42B95A
≈ Classic Green
Analogous -30° +30°
- D473D4
French Mauve
- AB83F9
≈ Lilac Geode
- EE6A9F
≈ Shark Bait
Triadic +120° +240°
- D473D4
French Mauve
- C49700
≈ Rapeseed
- 00B2C4
≈ Antigua Blue
Split-complementary +150° +210°
- D473D4
French Mauve
- 97AA00
≈ Barf Green
- 00B79D
≈ Aare River
Tetradic +90° +180° +270°
- D473D4
French Mauve
- E97D00
≈ Bright Marigold
- 42B95A
≈ Classic Green
- 00AAF0
≈ Vivid Cerulean
Contrast & accessibility
Ag
FailOn white
WCAG 2.91:1 · APCA Lc 55
Ag
AAAOn black
WCAG 7.20:1 · APCA Lc 47
Best text color: #000000
WCAG 7.20:1 (AAA) · APCA Lc 47
Contrast pairs
Code snippets
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);
}