Couleur nommée · #E0B0FF
Mauve
Mauve correspond à #E0B0FF : rgb(224 176 255), hsl(276 100% 85%), oklch(0.827 0.119 311.6). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Purple mean? → · Mauve color name →
#E0B0FF
oklch(0.827 0.119 311.6)
Conversions de couleur
- HEX
- #e0b0ff
- RGB
- rgb(224 176 255)
- HSL
- hsl(276 100% 85%)
- HWB
- hwb(276 69% 0%)
- OKLCH
- oklch(0.827 0.119 311.6)
- OKLab
- oklab(0.827 0.079 -0.089)
- CIE Lab
- lab(78.33 28.49 -32.52)
- LCH
- lch(78.33 43.24 311.2)
- CMYK
- cmyk(12% 31% 0% 0%)
Teintes · Ombres · Tons
Teintes
- E3B8FF
- E6C0FF
- E9C8FF
- EDD0FF
- F0D8FF
- F3E0FF
- F6E8FF
- F9EFFF
- FCF7FF
Ombres
- C399DE
- A682BE
- 8A6C9E
- 705680
- 564263
- 3E2E48
- 271C2E
- 120B16
- 020103
Tons
- D6ABF2
- CCA7E5
- C2A2D8
- B99DCB
- AF98BE
- A594B2
- 9C8FA5
- 938A99
- 89858C
Harmonies de couleurs
Complémentaire +180°
- E0B0FF
Mauve
- AAD784
≈ Feijoa
Analogue -30° +30°
- E0B0FF
Mauve
- BCC0FF
≈ Dried Lilac
- FCA7DD
≈ Corinthian Pink
Triadique +120° +240°
- E0B0FF
Mauve
- F7B96B
≈ Citrus Honey
- 53DFDA
≈ Hammam Blue
Complémentaire divisée +150° +210°
- E0B0FF
Mauve
- D6C969
≈ Chifle Yellow
- 79DFAE
≈ Jovial Jade
Tétradique +90° +180° +270°
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.77:1 · APCA Lc 33
Ag
AAASur noir
WCAG 11.82:1 · APCA Lc 70
Meilleure couleur de texte: #000000
WCAG 11.82:1 (AAA) · APCA Lc 70
Contrast pairs
Extraits de code
CSS
:root {
--mauve: #e0b0ff;
--mauve-rgb: 224 176 255;
--mauve-oklch: oklch(0.827 0.119 311.6);
}
.element {
color: var(--mauve);
background-color: hsl(276 100% 85%);
border-color: oklch(0.827 0.119 311.6);
}Tailwind CSS v4
@theme {
--color-mauve: #e0b0ff;
--color-mauve-50: #ffecff;
--color-mauve-100: #f6ddff;
--color-mauve-200: #e7c6f9;
--color-mauve-300: #cda6e3;
--color-mauve-400: #b68ad2;
--color-mauve-500: #a06dbf;
--color-mauve-600: #875da1;
--color-mauve-700: #6c4a82;
--color-mauve-800: #4f3661;
--color-mauve-900: #372544;
--color-mauve-950: #22132c;
}SCSS
$mauve: #e0b0ff;
$mauve-rgb: 224, 176, 255;
$mauve-light: mix(#fff, $mauve, 20%);
$mauve-dark: mix(#000, $mauve, 20%);
.element {
color: $mauve;
box-shadow: 0 0 0 2px rgba($mauve, 0.35);
}