Nearest named color · #875AA2
#875AA2
Nearest named color: Vicious Violet
#875AA2 (rgb(135 90 162), hsl(278 29% 49%), oklch(0.545 0.119 311.8)) is closest to the named color Vicious Violet. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#875AA2
oklch(0.545 0.119 311.8)
Color conversions
- HEX
- #875aa2
- RGB
- rgb(135 90 162)
- HSL
- hsl(278 29% 49%)
- HWB
- hwb(278 35% 36%)
- OKLCH
- oklch(0.545 0.119 311.8)
- OKLab
- oklab(0.545 0.079 -0.089)
- CIE Lab
- lab(45.51 29.21 -31.99)
- LCH
- lch(45.51 43.32 312.4)
- CMYK
- cmyk(17% 44% 0% 36%)
Tints · Shades · Tones
Tints
- 936AAC
- 9E7AB5
- AA8ABE
- B69AC8
- C2ABD1
- CEBBDA
- DACCE4
- E6DDED
- F3EEF6
Shades
- 754D8C
- 634177
- 513563
- 41294F
- 311E3C
- 21132A
- 130919
- 06030A
- 010001
Tones
- 865E9F
- 86639C
- 856799
- 856A95
- 846E92
- 83728F
- 82768B
- 827987
- 817D84
Color harmonies
Complementary +180°
- 875AA2
Vicious Violet
- 567E2E
≈ Master Chief
Analogous -30° +30°
- 875AA2
Vicious Violet
- 6666B3
≈ Bluish Purple Anemone
- 9E5284
≈ Purple Zergling
Triadic +120° +240°
- 875AA2
Vicious Violet
- 9A6300
≈ Raw Sienna
- 00817E
≈ Belly Flop
Split-complementary +150° +210°
- 875AA2
Vicious Violet
- 7E7200
≈ Sunlit Kelp Green
- 06855A
≈ Primal Green
Tetradic +90° +180° +270°
- 875AA2
Vicious Violet
- A85534
≈ Vesuvius
- 567E2E
≈ Master Chief
- 007D9A
≈ Pacific Pleasure
Contrast & accessibility
Ag
AAOn white
WCAG 5.23:1 · APCA Lc 76
Ag
FailOn black
WCAG 4.01:1 · APCA Lc 26
Best text color: #FFFFFF
WCAG 5.23:1 (AA) · APCA Lc 76
Contrast pairs
Code snippets
CSS
:root {
--vicious-violet: #875aa2;
--vicious-violet-rgb: 135 90 162;
--vicious-violet-oklch: oklch(0.545 0.119 311.8);
}
.element {
color: var(--vicious-violet);
background-color: hsl(278 29% 49%);
border-color: oklch(0.545 0.119 311.8);
}Tailwind CSS v4
@theme {
--color-vicious-violet: #875aa2;
--color-vicious-violet-50: #ffecff;
--color-vicious-violet-100: #f6ddff;
--color-vicious-violet-200: #e7c6f8;
--color-vicious-violet-300: #cda6e2;
--color-vicious-violet-400: #b68ad1;
--color-vicious-violet-500: #a06dbf;
--color-vicious-violet-600: #875da1;
--color-vicious-violet-700: #6c4a81;
--color-vicious-violet-800: #4f3661;
--color-vicious-violet-900: #372544;
--color-vicious-violet-950: #22132c;
}SCSS
$vicious-violet: #875aa2;
$vicious-violet-rgb: 135, 90, 162;
$vicious-violet-light: mix(#fff, $vicious-violet, 20%);
$vicious-violet-dark: mix(#000, $vicious-violet, 20%);
.element {
color: $vicious-violet;
box-shadow: 0 0 0 2px rgba($vicious-violet, 0.35);
}