Named color · #BB11AA
Punk Rock Purple
Punk Rock Purple is #BB11AA: rgb(187 17 170), hsl(306 83% 40%), oklch(0.55 0.239 333.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Punk Rock Purple color name →
#BB11AA
oklch(0.55 0.239 333.5)
Color conversions
- HEX
- #bb11aa
- RGB
- rgb(187 17 170)
- HSL
- hsl(306 83% 40%)
- HWB
- hwb(306 7% 27%)
- OKLCH
- oklch(0.55 0.239 333.5)
- OKLab
- oklab(0.55 0.214 -0.107)
- CIE Lab
- lab(44.08 70.68 -38.28)
- LCH
- lch(44.08 80.38 331.6)
- CMYK
- cmyk(0% 91% 9% 27%)
Tints · Shades · Tones
Tints
- C43BB3
- CD56BC
- D56EC5
- DD83CD
- E498D6
- EAADDE
- F0C2E7
- F6D6EF
- FBEBF7
Shades
- A20D93
- 8A097D
- 730668
- 5C0453
- 46023F
- 32012D
- 1F001B
- 0D000B
- 020001
Tones
- B72CA6
- B23CA2
- AD489E
- A8539A
- A25C96
- 9C6492
- 966C8E
- 8F7389
- 887A85
Color harmonies
Complementary +180°
- BB11AA
Punk Rock Purple
- 008848
≈ The Wild Apothecary
Analogous -30° +30°
- BB11AA
Punk Rock Purple
- 9137E0
≈ Thick Purple
- CF0064
≈ Vampiric Bloodlust
Triadic +120° +240°
- BB11AA
Punk Rock Purple
- 886F00
≈ Vermin Brown
- 007F93
≈ Pagoda
Split-complementary +150° +210°
- BB11AA
Punk Rock Purple
- 627D00
≈ Birch Leaf Green
- 008477
≈ Egyptian Green
Tetradic +90° +180° +270°
- BB11AA
Punk Rock Purple
- A35E00
≈ Raw Umber
- 008848
≈ The Wild Apothecary
- 0078B9
≈ Bumangués Blue
Contrast & accessibility
Ag
AAOn white
WCAG 5.56:1 · APCA Lc 76
Ag
FailOn black
WCAG 3.77:1 · APCA Lc 26
Best text color: #FFFFFF
WCAG 5.56:1 (AA) · APCA Lc 76
Contrast pairs
Code snippets
CSS
:root {
--punk-rock-purple: #bb11aa;
--punk-rock-purple-rgb: 187 17 170;
--punk-rock-purple-oklch: oklch(0.55 0.239 333.5);
}
.element {
color: var(--punk-rock-purple);
background-color: hsl(306 83% 40%);
border-color: oklch(0.55 0.239 333.5);
}Tailwind CSS v4
@theme {
--color-punk-rock-purple: #bb11aa;
--color-punk-rock-purple-50: #ffdcff;
--color-punk-rock-purple-100: #ffcaff;
--color-punk-rock-purple-200: #ffabfc;
--color-punk-rock-purple-300: #ff82e6;
--color-punk-rock-purple-400: #ec5ad8;
--color-punk-rock-purple-500: #da20c6;
--color-punk-rock-purple-600: #b820a7;
--color-punk-rock-purple-700: #941a86;
--color-punk-rock-purple-800: #6d1266;
--color-punk-rock-purple-900: #4d0c48;
--color-punk-rock-purple-950: #32002f;
}SCSS
$punk-rock-purple: #bb11aa;
$punk-rock-purple-rgb: 187, 17, 170;
$punk-rock-purple-light: mix(#fff, $punk-rock-purple, 20%);
$punk-rock-purple-dark: mix(#000, $punk-rock-purple, 20%);
.element {
color: $punk-rock-purple;
box-shadow: 0 0 0 2px rgba($punk-rock-purple, 0.35);
}