Cor nomeada · #E3D2DB
Mauve Aquarelle
Mauve Aquarelle é #E3D2DB: rgb(227 210 219), hsl(328 23% 86%), oklch(0.88 0.022 344.3). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Mauve Aquarelle color name →
#E3D2DB
oklch(0.88 0.022 344.3)
Conversões de cor
- HEX
- #e3d2db
- RGB
- rgb(227 210 219)
- HSL
- hsl(328 23% 86%)
- HWB
- hwb(328 82% 11%)
- OKLCH
- oklch(0.88 0.022 344.3)
- OKLab
- oklab(0.88 0.021 -0.006)
- CIE Lab
- lab(85.8 7.24 -2.22)
- LCH
- lch(85.8 7.57 342.9)
- CMYK
- cmyk(0% 7% 4% 11%)
Tons claros · Sombras · Tons
Tons claros
- E6D6DF
- E9DBE2
- EBDFE6
- EEE4E9
- F1E8ED
- F4EDF0
- F7F1F4
- F9F6F8
- FCFAFB
Sombras
- C5B6BE
- A89BA2
- 8C8187
- 71686D
- 575054
- 3F393C
- 272426
- 121011
- 030202
Tons
- D9C9D2
- CEC1C8
- C4B9BF
- BAB0B6
- B0A8AC
- A6A0A3
- 9D989A
- 939091
- 898889
Harmonias de cor
Complementar +180°
- E3D2DB
Mauve Aquarelle
- CBDCD4
≈ Light Soft Celadon
Análoga -30° +30°
- E3D2DB
Mauve Aquarelle
- DDD3E2
≈ Tricot Lilac White
- E6D2D3
≈ Ash Cherry Blossom
Tríade +120° +240°
- E3D2DB
Mauve Aquarelle
- D9D9C8
≈ Stage Whisper
- C9DBE3
≈ Vanilla Ice Smoke
Complementar dividida +150° +210°
- E3D2DB
Mauve Aquarelle
- D2DBCC
≈ Ottoman
- C8DCDC
≈ Whispering Blue
Tétrade +90° +180° +270°
- E3D2DB
Mauve Aquarelle
- E1D6C8
≈ Kestrel White
- CBDCD4
≈ Light Soft Celadon
- CED9E6
≈ Arctic Air
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.44:1 · APCA Lc 21
Ag
AAASobre preto
WCAG 14.50:1 · APCA Lc 82
Melhor cor de texto: #000000
WCAG 14.50:1 (AAA) · APCA Lc 82
Contrast pairs
Trechos de código
CSS
:root {
--mauve-aquarelle: #e3d2db;
--mauve-aquarelle-rgb: 227 210 219;
--mauve-aquarelle-oklch: oklch(0.88 0.022 344.3);
}
.element {
color: var(--mauve-aquarelle);
background-color: hsl(328 23% 86%);
border-color: oklch(0.88 0.022 344.3);
}Tailwind CSS v4
@theme {
--color-mauve-aquarelle: #e3d2db;
--color-mauve-aquarelle-50: #faf3f6;
--color-mauve-aquarelle-100: #eee5e9;
--color-mauve-aquarelle-200: #dcd1d6;
--color-mauve-aquarelle-300: #c0b3ba;
--color-mauve-aquarelle-400: #a999a2;
--color-mauve-aquarelle-500: #92818a;
--color-mauve-aquarelle-600: #7b6d74;
--color-mauve-aquarelle-700: #63575d;
--color-mauve-aquarelle-800: #483f44;
--color-mauve-aquarelle-900: #322c2f;
--color-mauve-aquarelle-950: #1e191c;
}SCSS
$mauve-aquarelle: #e3d2db;
$mauve-aquarelle-rgb: 227, 210, 219;
$mauve-aquarelle-light: mix(#fff, $mauve-aquarelle, 20%);
$mauve-aquarelle-dark: mix(#000, $mauve-aquarelle, 20%);
.element {
color: $mauve-aquarelle;
box-shadow: 0 0 0 2px rgba($mauve-aquarelle, 0.35);
}