Cor nomeada · #E0B0FF
Mauve
Mauve é #E0B0FF: rgb(224 176 255), hsl(276 100% 85%), oklch(0.827 0.119 311.6). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Purple mean? → · Mauve color name →
#E0B0FF
oklch(0.827 0.119 311.6)
Conversões de cor
- 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%)
Tons claros · Sombras · Tons
Tons claros
- E3B8FF
- E6C0FF
- E9C8FF
- EDD0FF
- F0D8FF
- F3E0FF
- F6E8FF
- F9EFFF
- FCF7FF
Sombras
- C399DE
- A682BE
- 8A6C9E
- 705680
- 564263
- 3E2E48
- 271C2E
- 120B16
- 020103
Tons
- D6ABF2
- CCA7E5
- C2A2D8
- B99DCB
- AF98BE
- A594B2
- 9C8FA5
- 938A99
- 89858C
Harmonias de cor
Complementar +180°
- E0B0FF
Mauve
- AAD784
≈ Feijoa
Análoga -30° +30°
- E0B0FF
Mauve
- BCC0FF
≈ Dried Lilac
- FCA7DD
≈ Corinthian Pink
Tríade +120° +240°
- E0B0FF
Mauve
- F7B96B
≈ Citrus Honey
- 53DFDA
≈ Hammam Blue
Complementar dividida +150° +210°
- E0B0FF
Mauve
- D6C969
≈ Chifle Yellow
- 79DFAE
≈ Jovial Jade
Tétrade +90° +180° +270°
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.77:1 · APCA Lc 33
Ag
AAASobre preto
WCAG 11.82:1 · APCA Lc 70
Melhor cor de texto: #000000
WCAG 11.82:1 (AAA) · APCA Lc 70
Contrast pairs
Trechos de código
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);
}