Named color · #745D83
Mystical Purple
Mystical Purple is #745D83: rgb(116 93 131), hsl(276 17% 44%), oklch(0.516 0.065 311.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Mystical Purple color name →
#745D83
oklch(0.516 0.065 311.6)
Color conversions
- HEX
- #745d83
- RGB
- rgb(116 93 131)
- HSL
- hsl(276 17% 44%)
- HWB
- hwb(276 36% 49%)
- OKLCH
- oklch(0.516 0.065 311.6)
- OKLab
- oklab(0.516 0.043 -0.048)
- CIE Lab
- lab(42.93 15.38 -17.71)
- LCH
- lch(42.93 23.45 311)
- CMYK
- cmyk(11% 29% 0% 49%)
Tints · Shades · Tones
Tints
- 816C8F
- 8E7B9B
- 9C8BA7
- A99BB3
- B7ABC0
- C5BBCC
- D3CCD9
- E2DDE5
- F0EEF2
Shades
- 645071
- 544360
- 45374F
- 372A3F
- 291F2F
- 1B1420
- 0F0A12
- 050306
- 010001
Tones
- 756183
- 766483
- 786882
- 796B82
- 7A6F82
- 7B7282
- 7C7681
- 7E7981
- 7F7D80
Color harmonies
Complementary +180°
- 745D83
Mystical Purple
- 5A7048
≈ Climbing Ivy
Analogous -30° +30°
- 745D83
Mystical Purple
- 61638C
≈ Twilight Purple
- 825972
≈ Euphoric Magenta
Triadic +120° +240°
- 745D83
Mystical Purple
- 7F623D
≈ Well Read
- 357471
≈ Jungle Noises
Split-complementary +150° +210°
- 745D83
Mystical Purple
- 6F693C
≈ Robinhood
- 44735C
≈ Foliage Green
Tetradic +90° +180° +270°
- 745D83
Mystical Purple
- 885B4A
≈ Carob Brown
- 5A7048
≈ Climbing Ivy
- 397082
≈ Oceanic Metropolis
Contrast & accessibility
Ag
AAOn white
WCAG 5.77:1 · APCA Lc 79
Ag
FailOn black
WCAG 3.63:1 · APCA Lc 23
Best text color: #FFFFFF
WCAG 5.77:1 (AA) · APCA Lc 79
Contrast pairs
Code snippets
CSS
:root {
--mystical-purple: #745d83;
--mystical-purple-rgb: 116 93 131;
--mystical-purple-oklch: oklch(0.516 0.065 311.6);
}
.element {
color: var(--mystical-purple);
background-color: hsl(276 17% 44%);
border-color: oklch(0.516 0.065 311.6);
}Tailwind CSS v4
@theme {
--color-mystical-purple: #745d83;
--color-mystical-purple-50: #fcf0ff;
--color-mystical-purple-100: #f0e2f8;
--color-mystical-purple-200: #decde8;
--color-mystical-purple-300: #c3aecf;
--color-mystical-purple-400: #ab94bb;
--color-mystical-purple-500: #947aa6;
--color-mystical-purple-600: #7d678c;
--color-mystical-purple-700: #645370;
--color-mystical-purple-800: #493c53;
--color-mystical-purple-900: #33293a;
--color-mystical-purple-950: #1e1724;
}SCSS
$mystical-purple: #745d83;
$mystical-purple-rgb: 116, 93, 131;
$mystical-purple-light: mix(#fff, $mystical-purple, 20%);
$mystical-purple-dark: mix(#000, $mystical-purple, 20%);
.element {
color: $mystical-purple;
box-shadow: 0 0 0 2px rgba($mystical-purple, 0.35);
}