Named color · #AA55FF
Vega Violet
Vega Violet is #AA55FF: rgb(170 85 255), hsl(270 100% 67%), oklch(0.635 0.241 303). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Vega Violet color name →
#AA55FF
oklch(0.635 0.241 303)
Color conversions
- HEX
- #aa55ff
- RGB
- rgb(170 85 255)
- HSL
- hsl(270 100% 67%)
- HWB
- hwb(270 33% 0%)
- OKLCH
- oklch(0.635 0.241 303)
- OKLab
- oklab(0.635 0.131 -0.202)
- CIE Lab
- lab(53.51 58.18 -72.02)
- LCH
- lch(53.51 92.58 308.9)
- CMYK
- cmyk(33% 67% 0% 0%)
Tints · Shades · Tones
Tints
- B26AFF
- BA7DFF
- C28FFF
- CA9FFF
- D3B0FF
- DBC0FF
- E4D0FF
- EDE0FF
- F6EFFF
Shades
- 9349DE
- 7D3DBE
- 68319E
- 532680
- 3F1C63
- 2D1148
- 1B082E
- 0B0216
- 010003
Tones
- A55DF3
- A163E6
- 9D69DA
- 986ECD
- 9472C1
- 9076B4
- 8C79A7
- 887C9B
- 847E8D
Color harmonies
Complementary +180°
- AA55FF
Vega Violet
- 799900
≈ Green Thumb
Analogous -30° +30°
- AA55FF
Vega Violet
- 667BFF
≈ Byzantine Night Blue
- D93AC7
≈ Leo Royal Fuchsia
Triadic +120° +240°
- AA55FF
Vega Violet
- C67300
≈ Dirty Orange
- 00A091
≈ Turquish
Split-complementary +150° +210°
- AA55FF
Vega Violet
- A68700
≈ Golden Palm
- 00A658
≈ Green Pigment
Tetradic +90° +180° +270°
- AA55FF
Vega Violet
- F83400
≈ Metroid Red
- 799900
≈ Green Thumb
- 009BB2
≈ Caneel Bay
Contrast & accessibility
Ag
FailOn white
WCAG 3.85:1 · APCA Lc 65
Ag
AAOn black
WCAG 5.45:1 · APCA Lc 36
Best text color: #000000
WCAG 5.45:1 (AA) · APCA Lc 36
Contrast pairs
Code snippets
CSS
:root {
--vega-violet: #aa55ff;
--vega-violet-rgb: 170 85 255;
--vega-violet-oklch: oklch(0.635 0.241 303);
}
.element {
color: var(--vega-violet);
background-color: hsl(270 100% 67%);
border-color: oklch(0.635 0.241 303);
}Tailwind CSS v4
@theme {
--color-vega-violet: #aa55ff;
--color-vega-violet-50: #ffe4ff;
--color-vega-violet-100: #fbd4ff;
--color-vega-violet-200: #ecb8ff;
--color-vega-violet-300: #d493ff;
--color-vega-violet-400: #bd70ff;
--color-vega-violet-500: #a944ff;
--color-vega-violet-600: #8f3cdc;
--color-vega-violet-700: #7230b1;
--color-vega-violet-800: #522286;
--color-vega-violet-900: #39175f;
--color-vega-violet-950: #240641;
}SCSS
$vega-violet: #aa55ff;
$vega-violet-rgb: 170, 85, 255;
$vega-violet-light: mix(#fff, $vega-violet, 20%);
$vega-violet-dark: mix(#000, $vega-violet, 20%);
.element {
color: $vega-violet;
box-shadow: 0 0 0 2px rgba($vega-violet, 0.35);
}