Colore con nome · #D1C5C4
Vaguely Mauve
Vaguely Mauve è #D1C5C4: rgb(209 197 196), hsl(5 12% 79%), oklch(0.833 0.014 23.2). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Vaguely Mauve color name →
#D1C5C4
oklch(0.833 0.014 23.2)
Conversioni di colore
- HEX
- #d1c5c4
- RGB
- rgb(209 197 196)
- HSL
- hsl(5 12% 79%)
- HWB
- hwb(5 77% 18%)
- OKLCH
- oklch(0.833 0.014 23.2)
- OKLab
- oklab(0.833 0.012 0.005)
- CIE Lab
- lab(80.49 4.21 2.09)
- LCH
- lch(80.49 4.7 26.4)
- CMYK
- cmyk(0% 6% 6% 18%)
Tinte · Ombre · Toni
Tinte
- D6CBCA
- DAD0D0
- DFD6D5
- E3DCDB
- E8E2E1
- ECE7E7
- F1EDED
- F6F3F3
- FAF9F9
Ombre
- B5ABAA
- 9B9291
- 817978
- 686161
- 504B4A
- 393535
- 232121
- 100E0E
- 020202
Toni
- C9BEBD
- C0B7B6
- B8B0AF
- B0A9A8
- A8A2A1
- A09B9B
- 989494
- 908D8D
- 888787
Armonie di colore
Complementare +180°
- D1C5C4
Vaguely Mauve
- BFCBCC
≈ Ice Flow
Analogo -30° +30°
- D1C5C4
Vaguely Mauve
- D0C5C9
≈ Piano Grey Rose
- D0C6C0
≈ Light Chamois Beige
Triadico +120° +240°
- D1C5C4
Vaguely Mauve
- C3CBC3
≈ Ocean Froth
- C4C8D1
≈ Viola Ice Grey
Complementare divisa +150° +210°
- D1C5C4
Vaguely Mauve
- C0CBC7
≈ Knightsbridge Mist
- C0CAD0
≈ Bay of Hope
Tetradico +90° +180° +270°
- D1C5C4
Vaguely Mauve
- C8C9BF
≈ Aloof Grey
- BFCBCC
≈ Ice Flow
- C8C7D0
≈ Hazy Mauve
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 1.68:1 · APCA Lc 30
Ag
AAASu nero
WCAG 12.49:1 · APCA Lc 73
Miglior colore del testo: #000000
WCAG 12.49:1 (AAA) · APCA Lc 73
Contrast pairs
Frammenti di codice
CSS
:root {
--vaguely-mauve: #d1c5c4;
--vaguely-mauve-rgb: 209 197 196;
--vaguely-mauve-oklch: oklch(0.833 0.014 23.2);
}
.element {
color: var(--vaguely-mauve);
background-color: hsl(5 12% 79%);
border-color: oklch(0.833 0.014 23.2);
}Tailwind CSS v4
@theme {
--color-vaguely-mauve: #d1c5c4;
--color-vaguely-mauve-50: #f9f4f3;
--color-vaguely-mauve-100: #ece6e5;
--color-vaguely-mauve-200: #dad2d1;
--color-vaguely-mauve-300: #beb5b4;
--color-vaguely-mauve-400: #a69b9b;
--color-vaguely-mauve-500: #8f8382;
--color-vaguely-mauve-600: #796f6e;
--color-vaguely-mauve-700: #615958;
--color-vaguely-mauve-800: #474140;
--color-vaguely-mauve-900: #312c2c;
--color-vaguely-mauve-950: #1d1a19;
}SCSS
$vaguely-mauve: #d1c5c4;
$vaguely-mauve-rgb: 209, 197, 196;
$vaguely-mauve-light: mix(#fff, $vaguely-mauve, 20%);
$vaguely-mauve-dark: mix(#000, $vaguely-mauve, 20%);
.element {
color: $vaguely-mauve;
box-shadow: 0 0 0 2px rgba($vaguely-mauve, 0.35);
}