Named color · #581A57
Purple Velour
Purple Velour is #581A57: rgb(88 26 87), hsl(301 54% 22%), oklch(0.343 0.121 328.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Purple Velour color name →
#581A57
oklch(0.343 0.121 328.5)
Color conversions
- HEX
- #581a57
- RGB
- rgb(88 26 87)
- HSL
- hsl(301 54% 22%)
- HWB
- hwb(301 10% 65%)
- OKLCH
- oklch(0.343 0.121 328.5)
- OKLab
- oklab(0.343 0.103 -0.063)
- CIE Lab
- lab(21.91 34.93 -22.7)
- LCH
- lch(21.91 41.66 327)
- CMYK
- cmyk(0% 70% 1% 65%)
Tints · Shades · Tones
Tints
- 693167
- 794777
- 8A5C87
- 9A7298
- AB89A8
- BBA0B9
- CCB7CA
- DDCEDC
- EEE7ED
Shades
- 4B154B
- 3F103E
- 330C33
- 280727
- 1D041C
- 120212
- 090108
- 030003
- 000000
Tones
- 5D265B
- 613160
- 663B64
- 6A4568
- 6E4F6C
- 725970
- 766374
- 796C78
- 7D767C
Color harmonies
Complementary +180°
- 581A57
Purple Velour
- 004618
≈ Wailing Woods
Analogous -30° +30°
- 581A57
Purple Velour
- 42256D
≈ Fading Horizon
- 651238
≈ Brown Chocolate
Triadic +120° +240°
- 581A57
Purple Velour
- 483600
≈ Night in the Woods
- 004149
≈ Warm Black
Split-complementary +150° +210°
- 581A57
Purple Velour
- 353E00
≈ Dark Olive
- 004339
≈ UP Forest Green
Tetradic +90° +180° +270°
- 581A57
Purple Velour
- 572C00
≈ Kyoto House
- 004618
≈ Wailing Woods
- 003D5C
≈ Poseidon
Contrast & accessibility
Ag
AAAOn white
WCAG 12.35:1 · APCA Lc 97
Ag
FailOn black
WCAG 1.70:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 12.35:1 (AAA) · APCA Lc 97
Contrast pairs
Code snippets
CSS
:root {
--purple-velour: #581a57;
--purple-velour-rgb: 88 26 87;
--purple-velour-oklch: oklch(0.343 0.121 328.5);
}
.element {
color: var(--purple-velour);
background-color: hsl(301 54% 22%);
border-color: oklch(0.343 0.121 328.5);
}Tailwind CSS v4
@theme {
--color-purple-velour: #581a57;
--color-purple-velour-50: #ffe9ff;
--color-purple-velour-100: #ffdafb;
--color-purple-velour-200: #f3c2ed;
--color-purple-velour-300: #dba1d4;
--color-purple-velour-400: #c584c2;
--color-purple-velour-500: #b167ae;
--color-purple-velour-600: #955793;
--color-purple-velour-700: #784676;
--color-purple-velour-800: #583258;
--color-purple-velour-900: #3d223e;
--color-purple-velour-950: #271127;
}SCSS
$purple-velour: #581a57;
$purple-velour-rgb: 88, 26, 87;
$purple-velour-light: mix(#fff, $purple-velour, 20%);
$purple-velour-dark: mix(#000, $purple-velour, 20%);
.element {
color: $purple-velour;
box-shadow: 0 0 0 2px rgba($purple-velour, 0.35);
}