Named color · #A08994
Art Nouveau Violet
Art Nouveau Violet is #A08994: rgb(160 137 148), hsl(331 11% 58%), oklch(0.654 0.032 347.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Art Nouveau Violet color name →
#A08994
oklch(0.654 0.032 347.5)
Color conversions
- HEX
- #a08994
- RGB
- rgb(160 137 148)
- HSL
- hsl(331 11% 58%)
- HWB
- hwb(331 54% 37%)
- OKLCH
- oklch(0.654 0.032 347.5)
- OKLab
- oklab(0.654 0.031 -0.007)
- CIE Lab
- lab(59.48 10.42 -2.5)
- LCH
- lch(59.48 10.71 346.5)
- CMYK
- cmyk(0% 14% 7% 37%)
Tints · Shades · Tones
Tints
- A9949E
- B3A0A9
- BCABB3
- C5B7BE
- CFC2C8
- D8CED3
- E2DADE
- ECE6E9
- F5F3F4
Shades
- 8B7680
- 76646D
- 61535A
- 4E4248
- 3B3136
- 292226
- 191416
- 090708
- 010101
Tones
- 9D8892
- 9A8790
- 96868E
- 93858C
- 90858A
- 8D8488
- 8A8386
- 868284
- 838182
Color harmonies
Complementary +180°
- A08994
Art Nouveau Violet
- 7F978D
≈ Azores
Analogous -30° +30°
- A08994
Art Nouveau Violet
- 998B9D
≈ Gentle Mauve
- A38989
≈ Tin Pink
Triadic +120° +240°
- A08994
Art Nouveau Violet
- 92927C
≈ Paseo Verde
- 7D95A0
≈ Wethers Field
Split-complementary +150° +210°
- A08994
Art Nouveau Violet
- 879583
≈ Aloe Tip
- 7B9797
≈ Villa Blue
Tetradic +90° +180° +270°
- A08994
Art Nouveau Violet
- 9C8E7B
≈ Chinchilla
- 7F978D
≈ Azores
- 8592A4
≈ Fantasy Grey
Contrast & accessibility
Ag
FailOn white
WCAG 3.23:1 · APCA Lc 60
Ag
AAOn black
WCAG 6.50:1 · APCA Lc 42
Best text color: #000000
WCAG 6.50:1 (AA) · APCA Lc 42
Contrast pairs
Code snippets
CSS
:root {
--art-nouveau-violet: #a08994;
--art-nouveau-violet-rgb: 160 137 148;
--art-nouveau-violet-oklch: oklch(0.654 0.032 347.5);
}
.element {
color: var(--art-nouveau-violet);
background-color: hsl(331 11% 58%);
border-color: oklch(0.654 0.032 347.5);
}Tailwind CSS v4
@theme {
--color-art-nouveau-violet: #a08994;
--color-art-nouveau-violet-50: #fdf2f6;
--color-art-nouveau-violet-100: #f1e4e9;
--color-art-nouveau-violet-200: #e0cfd6;
--color-art-nouveau-violet-300: #c5b1ba;
--color-art-nouveau-violet-400: #ad97a2;
--color-art-nouveau-violet-500: #977e8a;
--color-art-nouveau-violet-600: #806b75;
--color-art-nouveau-violet-700: #66555d;
--color-art-nouveau-violet-800: #4b3e45;
--color-art-nouveau-violet-900: #342b30;
--color-art-nouveau-violet-950: #1f181c;
}SCSS
$art-nouveau-violet: #a08994;
$art-nouveau-violet-rgb: 160, 137, 148;
$art-nouveau-violet-light: mix(#fff, $art-nouveau-violet, 20%);
$art-nouveau-violet-dark: mix(#000, $art-nouveau-violet, 20%);
.element {
color: $art-nouveau-violet;
box-shadow: 0 0 0 2px rgba($art-nouveau-violet, 0.35);
}