Nearest named color · #9E509E
#9E509E
Nearest named color: Vicious Violet
#9E509E (rgb(158 80 158), hsl(300 33% 47%), oklch(0.555 0.144 327.3)) is closest to the named color Vicious Violet. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#9E509E
oklch(0.555 0.144 327.3)
Color conversions
- HEX
- #9e509e
- RGB
- rgb(158 80 158)
- HSL
- hsl(300 33% 47%)
- HWB
- hwb(300 31% 38%)
- OKLCH
- oklch(0.555 0.144 327.3)
- OKLab
- oklab(0.555 0.122 -0.078)
- CIE Lab
- lab(46.22 41.41 -28.25)
- LCH
- lch(46.22 50.13 325.7)
- CMYK
- cmyk(0% 49% 0% 38%)
Tints · Shades · Tones
Tints
- A862A8
- B273B2
- BD84BB
- C696C5
- D0A7CF
- DAB8D8
- E3CAE2
- EDDBEC
- F6EDF5
Shades
- 894489
- 743974
- 602E60
- 4D244D
- 3A1A3A
- 291029
- 180718
- 090209
- 010001
Tones
- 9C569B
- 995B98
- 966196
- 946693
- 916A90
- 8E6F8D
- 8B738A
- 877887
- 847C83
Color harmonies
Complementary +180°
- 9E509E
Vicious Violet
- 25893C
≈ Cold Green
Analogous -30° +30°
- 9E509E
Vicious Violet
- 7D5DBC
≈ Fuchsia Blue
- B24874
≈ Royal Heath
Triadic +120° +240°
- 9E509E
Vicious Violet
- 8F6E00
≈ Honey Yellow Green
- 00828F
≈ True Teal
Split-complementary +150° +210°
- 9E509E
Vicious Violet
- 6E7C00
≈ Topiary Garden
- 008672
≈ Summer Turquoise
Tetradic +90° +180° +270°
- 9E509E
Vicious Violet
- AB5B00
≈ Raw Umber
- 25893C
≈ Cold Green
- 007CB1
≈ Nice Blue
Contrast & accessibility
Ag
AAOn white
WCAG 5.12:1 · APCA Lc 75
Ag
FailOn black
WCAG 4.09:1 · APCA Lc 27
Best text color: #FFFFFF
WCAG 5.12:1 (AA) · APCA Lc 75
Contrast pairs
Code snippets
CSS
:root {
--vicious-violet: #9e509e;
--vicious-violet-rgb: 158 80 158;
--vicious-violet-oklch: oklch(0.555 0.144 327.3);
}
.element {
color: var(--vicious-violet);
background-color: hsl(300 33% 47%);
border-color: oklch(0.555 0.144 327.3);
}Tailwind CSS v4
@theme {
--color-vicious-violet: #9e509e;
--color-vicious-violet-50: #ffe7ff;
--color-vicious-violet-100: #ffd7ff;
--color-vicious-violet-200: #f8bef3;
--color-vicious-violet-300: #e19cdb;
--color-vicious-violet-400: #cb7eca;
--color-vicious-violet-500: #b75fb7;
--color-vicious-violet-600: #9b519a;
--color-vicious-violet-700: #7c407c;
--color-vicious-violet-800: #5b2e5d;
--color-vicious-violet-900: #401f41;
--color-vicious-violet-950: #280f2a;
}SCSS
$vicious-violet: #9e509e;
$vicious-violet-rgb: 158, 80, 158;
$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);
}