Named color · #57385E
Purpurite Violet
Purpurite Violet is #57385E: rgb(87 56 94), hsl(289 25% 29%), oklch(0.393 0.073 320.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Purpurite Violet color name →
#57385E
oklch(0.393 0.073 320.1)
Color conversions
- HEX
- #57385e
- RGB
- rgb(87 56 94)
- HSL
- hsl(289 25% 29%)
- HWB
- hwb(289 22% 63%)
- OKLCH
- oklch(0.393 0.073 320.1)
- OKLab
- oklab(0.393 0.056 -0.047)
- CIE Lab
- lab(28.47 19.65 -17.12)
- LCH
- lch(28.47 26.06 318.9)
- CMYK
- cmyk(7% 40% 0% 63%)
Tints · Shades · Tones
Tints
- 674A6D
- 765C7C
- 876F8C
- 97839C
- A896AC
- B9AABC
- CABFCC
- DBD4DD
- EDE9EE
Shades
- 4B2F51
- 3E2744
- 331F37
- 27172B
- 1C0F1F
- 120814
- 08040A
- 030103
- 000000
Tones
- 5B3F62
- 5F4665
- 644D69
- 68546C
- 6C5C6F
- 706373
- 746A76
- 787179
- 7C797D
Color harmonies
Complementary +180°
- 57385E
Purpurite Violet
- 2F4F28
≈ Chestnut Green
Analogous -30° +30°
- 57385E
Purpurite Violet
- 453E6A
≈ Evening Mauve
- 63344B
≈ Grape Wine
Triadic +120° +240°
- 57385E
Purpurite Violet
- 5A410E
≈ Smoked Oak Brown
- 005054
≈ Transporter Green
Split-complementary +150° +210°
- 57385E
Purpurite Violet
- 484913
≈ Alligator Gladiator
- 0B5240
≈ Tetsu Green
Tetradic +90° +180° +270°
- 57385E
Purpurite Violet
- 65391F
≈ Cassiterite Brown
- 2F4F28
≈ Chestnut Green
- 0B4C65
≈ Fresco Blue
Contrast & accessibility
Ag
AAAOn white
WCAG 9.84:1 · APCA Lc 93
Ag
FailOn black
WCAG 2.13:1 · APCA Lc 10
Best text color: #FFFFFF
WCAG 9.84:1 (AAA) · APCA Lc 93
Contrast pairs
Code snippets
CSS
:root {
--purpurite-violet: #57385e;
--purpurite-violet-rgb: 87 56 94;
--purpurite-violet-oklch: oklch(0.393 0.073 320.1);
}
.element {
color: var(--purpurite-violet);
background-color: hsl(289 25% 29%);
border-color: oklch(0.393 0.073 320.1);
}Tailwind CSS v4
@theme {
--color-purpurite-violet: #57385e;
--color-purpurite-violet-50: #ffefff;
--color-purpurite-violet-100: #f4e0f7;
--color-purpurite-violet-200: #e4cae7;
--color-purpurite-violet-300: #caabce;
--color-purpurite-violet-400: #b291ba;
--color-purpurite-violet-500: #9c76a5;
--color-purpurite-violet-600: #84648b;
--color-purpurite-violet-700: #6a506f;
--color-purpurite-violet-800: #4d3a53;
--color-purpurite-violet-900: #36283a;
--color-purpurite-violet-950: #211624;
}SCSS
$purpurite-violet: #57385e;
$purpurite-violet-rgb: 87, 56, 94;
$purpurite-violet-light: mix(#fff, $purpurite-violet, 20%);
$purpurite-violet-dark: mix(#000, $purpurite-violet, 20%);
.element {
color: $purpurite-violet;
box-shadow: 0 0 0 2px rgba($purpurite-violet, 0.35);
}