Named color · #7722CC
Puissant Purple
Puissant Purple is #7722CC: rgb(119 34 204), hsl(270 71% 47%), oklch(0.485 0.234 299.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Puissant Purple color name →
#7722CC
oklch(0.485 0.234 299.6)
Color conversions
- HEX
- #7722cc
- RGB
- rgb(119 34 204)
- HSL
- hsl(270 71% 47%)
- HWB
- hwb(270 13% 20%)
- OKLCH
- oklch(0.485 0.234 299.6)
- OKLab
- oklab(0.485 0.116 -0.203)
- CIE Lab
- lab(35.81 58.67 -72.27)
- LCH
- lch(35.81 93.09 309.1)
- CMYK
- cmyk(42% 83% 0% 20%)
Tints · Shades · Tones
Tints
- 8342D3
- 8F5BDA
- 9C71E0
- A986E5
- B79AEB
- C4AFF0
- D3C3F4
- E1D7F8
- F0EBFC
Shades
- 671CB1
- 571697
- 47117E
- 380B65
- 2A074E
- 1C0337
- 100122
- 05000F
- 010002
Tones
- 7734C5
- 7841BF
- 784CB8
- 7956B0
- 7A5EA9
- 7B66A2
- 7C6D9A
- 7D7492
- 7F7A89
Color harmonies
Complementary +180°
- 7722CC
Puissant Purple
- 586800
≈ Serrano Pepper
Analogous -30° +30°
- 7722CC
Puissant Purple
- 3243E0
≈ Palatinate Blue
- 9D0099
≈ Barney Purple
Triadic +120° +240°
- 7722CC
Puissant Purple
- 8D4C00
≈ Parasite Brown
- 006F61
≈ Falcon Turquoise
Split-complementary +150° +210°
- 7722CC
Puissant Purple
- 755C00
≈ Hot Mustard
- 007331
≈ Clear Green
Tetradic +90° +180° +270°
- 7722CC
Puissant Purple
- B40600
≈ All Systems Red
- 586800
≈ Serrano Pepper
- 006C79
≈ Carnival Night
Contrast & accessibility
Ag
AAAOn white
WCAG 7.27:1 · APCA Lc 84
Ag
FailOn black
WCAG 2.88:1 · APCA Lc 18
Best text color: #FFFFFF
WCAG 7.27:1 (AAA) · APCA Lc 84
Contrast pairs
Code snippets
CSS
:root {
--puissant-purple: #7722cc;
--puissant-purple-rgb: 119 34 204;
--puissant-purple-oklch: oklch(0.485 0.234 299.6);
}
.element {
color: var(--puissant-purple);
background-color: hsl(270 71% 47%);
border-color: oklch(0.485 0.234 299.6);
}Tailwind CSS v4
@theme {
--color-puissant-purple: #7722cc;
--color-puissant-purple-50: #ffe6ff;
--color-puissant-purple-100: #f6d6ff;
--color-puissant-purple-200: #e6bbff;
--color-puissant-purple-300: #ce96ff;
--color-puissant-purple-400: #b574ff;
--color-puissant-purple-500: #a14cff;
--color-puissant-purple-600: #8842dd;
--color-puissant-purple-700: #6d35b2;
--color-puissant-purple-800: #4e2687;
--color-puissant-purple-900: #361a5f;
--color-puissant-purple-950: #220841;
}SCSS
$puissant-purple: #7722cc;
$puissant-purple-rgb: 119, 34, 204;
$puissant-purple-light: mix(#fff, $puissant-purple, 20%);
$puissant-purple-dark: mix(#000, $puissant-purple, 20%);
.element {
color: $puissant-purple;
box-shadow: 0 0 0 2px rgba($puissant-purple, 0.35);
}