Named color · #89687D
Imaginary Mauve
Imaginary Mauve is #89687D: rgb(137 104 125), hsl(322 14% 47%), oklch(0.557 0.052 340.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Imaginary Mauve color name →
#89687D
oklch(0.557 0.052 340.5)
Color conversions
- HEX
- #89687d
- RGB
- rgb(137 104 125)
- HSL
- hsl(322 14% 47%)
- HWB
- hwb(322 41% 46%)
- OKLCH
- oklch(0.557 0.052 340.5)
- OKLab
- oklab(0.557 0.049 -0.017)
- CIE Lab
- lab(47.92 16.31 -6.36)
- LCH
- lch(47.92 17.51 338.7)
- CMYK
- cmyk(0% 24% 9% 46%)
Tints · Shades · Tones
Tints
- 947689
- A08496
- AC93A2
- B7A2AF
- C3B1BC
- CFC0C9
- DBCFD6
- E7DFE4
- F3EFF1
Shades
- 76596C
- 644B5B
- 533E4B
- 42303B
- 31242C
- 22181E
- 140C11
- 070405
- 010001
Tones
- 886A7D
- 886D7E
- 876F7E
- 86727E
- 85747F
- 84777F
- 83797F
- 827B7F
- 817E80
Color harmonies
Complementary +180°
- 89687D
Imaginary Mauve
- 597D6A
≈ Juniper Green
Analogous -30° +30°
- 89687D
Imaginary Mauve
- 7D6B8B
≈ Nymph’s Delight
- 8F676C
≈ Deadlock
Triadic +120° +240°
- 89687D
Imaginary Mauve
- 7A7551
≈ Steel Legion Drab
- 507B89
≈ Sky Space
Split-complementary +150° +210°
- 89687D
Imaginary Mauve
- 697A5A
≈ Kariyasu Green
- 4F7E7B
≈ Nickel Ore Green
Tetradic +90° +180° +270°
- 89687D
Imaginary Mauve
- 876F52
≈ Appaloosa Spots
- 597D6A
≈ Juniper Green
- 5D7691
≈ Columbus
Contrast & accessibility
Ag
AAOn white
WCAG 4.83:1 · APCA Lc 74
Ag
FailOn black
WCAG 4.33:1 · APCA Lc 28
Best text color: #FFFFFF
WCAG 4.83:1 (AA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--imaginary-mauve: #89687d;
--imaginary-mauve-rgb: 137 104 125;
--imaginary-mauve-oklch: oklch(0.557 0.052 340.5);
}
.element {
color: var(--imaginary-mauve);
background-color: hsl(322 14% 47%);
border-color: oklch(0.557 0.052 340.5);
}Tailwind CSS v4
@theme {
--color-imaginary-mauve: #89687d;
--color-imaginary-mauve-50: #fff0f9;
--color-imaginary-mauve-100: #f5e1ed;
--color-imaginary-mauve-200: #e5ccda;
--color-imaginary-mauve-300: #cbadbf;
--color-imaginary-mauve-400: #b493a8;
--color-imaginary-mauve-500: #9e7991;
--color-imaginary-mauve-600: #86677a;
--color-imaginary-mauve-700: #6b5262;
--color-imaginary-mauve-800: #4f3c48;
--color-imaginary-mauve-900: #372932;
--color-imaginary-mauve-950: #22171e;
}SCSS
$imaginary-mauve: #89687d;
$imaginary-mauve-rgb: 137, 104, 125;
$imaginary-mauve-light: mix(#fff, $imaginary-mauve, 20%);
$imaginary-mauve-dark: mix(#000, $imaginary-mauve, 20%);
.element {
color: $imaginary-mauve;
box-shadow: 0 0 0 2px rgba($imaginary-mauve, 0.35);
}