Named color · #CC88FF
Crash Pink
Crash Pink is #CC88FF: rgb(204 136 255), hsl(274 100% 77%), oklch(0.742 0.178 309.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Crash Pink color name →
#CC88FF
oklch(0.742 0.178 309.1)
Color conversions
- HEX
- #cc88ff
- RGB
- rgb(204 136 255)
- HSL
- hsl(274 100% 77%)
- HWB
- hwb(274 53% 0%)
- OKLCH
- oklch(0.742 0.178 309.1)
- OKLab
- oklab(0.742 0.112 -0.138)
- CIE Lab
- lab(67.39 42.59 -49.66)
- LCH
- lch(67.39 65.42 310.6)
- CMYK
- cmyk(20% 47% 0% 0%)
Tints · Shades · Tones
Tints
- D195FF
- D6A1FF
- DBADFF
- E1B9FF
- E6C5FF
- EBD1FF
- F0DCFF
- F5E8FF
- FAF3FF
Shades
- B175DE
- 9763BE
- 7E529E
- 654180
- 4E3163
- 372248
- 22132E
- 0F0616
- 020103
Tones
- C488F2
- BC88E5
- B588D9
- AD87CC
- A586BF
- 9E86B3
- 9684A6
- 8F8399
- 87828D
Color harmonies
Complementary +180°
- CC88FF
Crash Pink
- 88C031
≈ Dark Lemon Lime
Analogous -30° +30°
- CC88FF
Crash Pink
- 9AA1FF
≈ Cobalite
- F17AD0
≈ Nervous Neon Pink
Triadic +120° +240°
- CC88FF
Crash Pink
- EC9500
≈ Gold Fusion
- 00C5BC
≈ Swimmers Pool
Split-complementary +150° +210°
- CC88FF
Crash Pink
- C4AC00
≈ Muddy Yellow
- 00CB83
≈ Retro Lime
Tetradic +90° +180° +270°
- CC88FF
Crash Pink
- FF8359
≈ Pink Fire
- 88C031
≈ Dark Lemon Lime
- 00BEE4
≈ Blue Raspberry
Contrast & accessibility
Ag
FailOn white
WCAG 2.46:1 · APCA Lc 48
Ag
AAAOn black
WCAG 8.53:1 · APCA Lc 54
Best text color: #000000
WCAG 8.53:1 (AAA) · APCA Lc 54
Contrast pairs
Code snippets
CSS
:root {
--crash-pink: #cc88ff;
--crash-pink-rgb: 204 136 255;
--crash-pink-oklch: oklch(0.742 0.178 309.1);
}
.element {
color: var(--crash-pink);
background-color: hsl(274 100% 77%);
border-color: oklch(0.742 0.178 309.1);
}Tailwind CSS v4
@theme {
--color-crash-pink: #cc88ff;
--color-crash-pink-50: #ffe7ff;
--color-crash-pink-100: #fbd8ff;
--color-crash-pink-200: #edbfff;
--color-crash-pink-300: #d59cfa;
--color-crash-pink-400: #bd7ded;
--color-crash-pink-500: #a85cdd;
--color-crash-pink-600: #8e4fbb;
--color-crash-pink-700: #723f96;
--color-crash-pink-800: #532e71;
--color-crash-pink-900: #3a1f50;
--color-crash-pink-950: #240e35;
}SCSS
$crash-pink: #cc88ff;
$crash-pink-rgb: 204, 136, 255;
$crash-pink-light: mix(#fff, $crash-pink, 20%);
$crash-pink-dark: mix(#000, $crash-pink, 20%);
.element {
color: $crash-pink;
box-shadow: 0 0 0 2px rgba($crash-pink, 0.35);
}