Color con nombre · #AF9294
Deauville Mauve
Deauville Mauve es #AF9294: rgb(175 146 148), hsl(356 15% 63%), oklch(0.687 0.035 13.3). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Deauville Mauve color name →
#AF9294
oklch(0.687 0.035 13.3)
Conversiones de color
- HEX
- #af9294
- RGB
- rgb(175 146 148)
- HSL
- hsl(356 15% 63%)
- HWB
- hwb(356 57% 31%)
- OKLCH
- oklch(0.687 0.035 13.3)
- OKLab
- oklab(0.687 0.034 0.008)
- CIE Lab
- lab(63.29 11.46 3.22)
- LCH
- lch(63.29 11.9 15.7)
- CMYK
- cmyk(0% 17% 15% 31%)
Tintes · Sombras · Tonos
Tintes
- B79C9E
- BFA7A9
- C7B2B3
- CFBCBE
- D7C7C8
- DFD2D3
- E7DDDE
- EFE8E9
- F7F4F4
Sombras
- 987E80
- 816B6D
- 6B585A
- 564648
- 413536
- 2E2526
- 1C1616
- 0B0808
- 010101
Tonos
- AA9092
- A68E90
- A18D8E
- 9C8B8C
- 98898A
- 938788
- 8E8586
- 898484
- 858282
Armonías de color
Complementario +180°
- AF9294
Deauville Mauve
- 82A2A0
≈ Venus Teal
Análogo -30° +30°
- AF9294
Deauville Mauve
- AB92A0
≈ Metamorphosis
- AE9489
≈ Plush Suede
Triádico +120° +240°
- AF9294
Deauville Mauve
- 929F8A
≈ Triamble
- 8C9CB0
≈ Faded Sea
Complementario dividido +150° +210°
- AF9294
Deauville Mauve
- 87A294
≈ Modern Mint
- 84A0AA
≈ Tourmaline
Tetrádico +90° +180° +270°
- AF9294
Deauville Mauve
- 9E9C83
≈ Battle Harbour
- 82A2A0
≈ Venus Teal
- 9798B0
≈ Bay Fog
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.85:1 · APCA Lc 55
Ag
AAASobre negro
WCAG 7.36:1 · APCA Lc 47
Mejor color de texto: #000000
WCAG 7.36:1 (AAA) · APCA Lc 47
Contrast pairs
Fragmentos de código
CSS
:root {
--deauville-mauve: #af9294;
--deauville-mauve-rgb: 175 146 148;
--deauville-mauve-oklch: oklch(0.687 0.035 13.3);
}
.element {
color: var(--deauville-mauve);
background-color: hsl(356 15% 63%);
border-color: oklch(0.687 0.035 13.3);
}Tailwind CSS v4
@theme {
--color-deauville-mauve: #af9294;
--color-deauville-mauve-50: #fff1f2;
--color-deauville-mauve-100: #f3e3e4;
--color-deauville-mauve-200: #e3cfcf;
--color-deauville-mauve-300: #c9b1b1;
--color-deauville-mauve-400: #b29698;
--color-deauville-mauve-500: #9c7d7f;
--color-deauville-mauve-600: #846a6c;
--color-deauville-mauve-700: #6a5556;
--color-deauville-mauve-800: #4e3e3f;
--color-deauville-mauve-900: #362a2c;
--color-deauville-mauve-950: #211819;
}SCSS
$deauville-mauve: #af9294;
$deauville-mauve-rgb: 175, 146, 148;
$deauville-mauve-light: mix(#fff, $deauville-mauve, 20%);
$deauville-mauve-dark: mix(#000, $deauville-mauve, 20%);
.element {
color: $deauville-mauve;
box-shadow: 0 0 0 2px rgba($deauville-mauve, 0.35);
}