Named color · #CC0088
Snappy Violet
Snappy Violet is #CC0088: rgb(204 0 136), hsl(320 100% 40%), oklch(0.558 0.233 349.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Snappy Violet color name →
#CC0088
oklch(0.558 0.233 349.4)
Color conversions
- HEX
- #cc0088
- RGB
- rgb(204 0 136)
- HSL
- hsl(320 100% 40%)
- HWB
- hwb(320 0% 20%)
- OKLCH
- oklch(0.558 0.233 349.4)
- OKLab
- oklab(0.558 0.229 -0.043)
- CIE Lab
- lab(45.53 73.01 -15.24)
- LCH
- lch(45.53 74.58 348.2)
- CMYK
- cmyk(0% 100% 33% 20%)
Tints · Shades · Tones
Tints
- D43793
- DC549F
- E36CAB
- E982B6
- EF98C2
- F4ADCE
- F8C1DA
- FBD6E6
- FEEAF3
Shades
- B10075
- 970063
- 7E0052
- 650041
- 4E0031
- 370022
- 220013
- 0F0006
- 020001
Tones
- C62787
- C03987
- BA4686
- B35185
- AC5B84
- A46484
- 9C6B83
- 947382
- 8A7A81
Color harmonies
Complementary +180°
- CC0088
Snappy Violet
- 008869
≈ Celtic Queen
Analogous -30° +30°
- CC0088
Snappy Violet
- AB2DC7
≈ Telemagenta
- D8003A
≈ Kurenai Red
Triadic +120° +240°
- CC0088
Snappy Violet
- 7A7900
≈ Mongolian Plateau
- 007FA7
≈ Advertising Blue
Split-complementary +150° +210°
- CC0088
Snappy Violet
- 2D8B00
≈ Diamine Green
- 008489
≈ Precious Blue
Tetradic +90° +180° +270°
- CC0088
Snappy Violet
- 976A00
≈ Balor Brown
- 008869
≈ Celtic Queen
- 0069F1
≈ Epic Blue
Contrast & accessibility
Ag
AAOn white
WCAG 5.35:1 · APCA Lc 74
Ag
FailOn black
WCAG 3.92:1 · APCA Lc 28
Best text color: #FFFFFF
WCAG 5.35:1 (AA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--snappy-violet: #cc0088;
--snappy-violet-rgb: 204 0 136;
--snappy-violet-oklch: oklch(0.558 0.233 349.4);
}
.element {
color: var(--snappy-violet);
background-color: hsl(320 100% 40%);
border-color: oklch(0.558 0.233 349.4);
}Tailwind CSS v4
@theme {
--color-snappy-violet: #cc0088;
--color-snappy-violet-50: #ffdafd;
--color-snappy-violet-100: #ffc8f1;
--color-snappy-violet-200: #ffa9e0;
--color-snappy-violet-300: #ff7fc5;
--color-snappy-violet-400: #fc54b3;
--color-snappy-violet-500: #ea099d;
--color-snappy-violet-600: #c61385;
--color-snappy-violet-700: #9f116a;
--color-snappy-violet-800: #760a51;
--color-snappy-violet-900: #530738;
--color-snappy-violet-950: #370023;
}SCSS
$snappy-violet: #cc0088;
$snappy-violet-rgb: 204, 0, 136;
$snappy-violet-light: mix(#fff, $snappy-violet, 20%);
$snappy-violet-dark: mix(#000, $snappy-violet, 20%);
.element {
color: $snappy-violet;
box-shadow: 0 0 0 2px rgba($snappy-violet, 0.35);
}