Named color · #FD02FF
Sixteen Million Pink
Sixteen Million Pink is #FD02FF: rgb(253 2 255), hsl(300 100% 50%), oklch(0.699 0.321 327.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Sixteen Million Pink color name →
#FD02FF
oklch(0.699 0.321 327.9)
Color conversions
- HEX
- #fd02ff
- RGB
- rgb(253 2 255)
- HSL
- hsl(300 100% 50%)
- HWB
- hwb(300 1% 0%)
- OKLCH
- oklch(0.699 0.321 327.9)
- OKLab
- oklab(0.699 0.272 -0.171)
- CIE Lab
- lab(59.85 93.07 -61.03)
- LCH
- lch(59.85 111.3 326.7)
- CMYK
- cmyk(1% 99% 0% 0%)
Tints · Shades · Tones
Tints
- FF45FF
- FF64FF
- FF7CFF
- FF92FF
- FFA6FF
- FFB9FF
- FFCBFF
- FFDDFF
- FFEEFF
Shades
- DC01DE
- BC01BE
- 9D019E
- 7F0080
- 620063
- 470048
- 2D002E
- 160016
- 030003
Tones
- F132F2
- E646E6
- DA54D9
- CE5FCD
- C267C0
- B56EB3
- A974A7
- 9C799A
- 8E7D8D
Color harmonies
Complementary +180°
- FD02FF
Sixteen Million Pink
- 00BE4C
≈ Lǜ Sè Green
Analogous -30° +30°
- FD02FF
Sixteen Million Pink
- AD80FF
≈ Purple Illusionist
- FF559E
≈ Fuchsia Fever
Triadic +120° +240°
- FD02FF
Sixteen Million Pink
- C39700
≈ Rapeseed
- 00B2C5
≈ Antigua Blue
Split-complementary +150° +210°
- FD02FF
Sixteen Million Pink
- 96AA00
≈ Barf Green
- 00B89E
≈ Aare River
Tetradic +90° +180° +270°
- FD02FF
Sixteen Million Pink
- E97E00
≈ Bright Marigold
- 00BE4C
≈ Lǜ Sè Green
- 00A9F2
≈ Vivid Cerulean
Contrast & accessibility
Ag
FailOn white
WCAG 3.16:1 · APCA Lc 56
Ag
AAOn black
WCAG 6.62:1 · APCA Lc 46
Best text color: #000000
WCAG 6.62:1 (AA) · APCA Lc 46
Contrast pairs
Code snippets
CSS
:root {
--sixteen-million-pink: #fd02ff;
--sixteen-million-pink-rgb: 253 2 255;
--sixteen-million-pink-oklch: oklch(0.699 0.321 327.9);
}
.element {
color: var(--sixteen-million-pink);
background-color: hsl(300 100% 50%);
border-color: oklch(0.699 0.321 327.9);
}Tailwind CSS v4
@theme {
--color-sixteen-million-pink: #fd02ff;
--color-sixteen-million-pink-50: #ffd3ff;
--color-sixteen-million-pink-100: #ffbfff;
--color-sixteen-million-pink-200: #ff9cff;
--color-sixteen-million-pink-300: #ff6aff;
--color-sixteen-million-pink-400: #f927fb;
--color-sixteen-million-pink-500: #e800ec;
--color-sixteen-million-pink-600: #c400c7;
--color-sixteen-million-pink-700: #9e00a0;
--color-sixteen-million-pink-800: #74007b;
--color-sixteen-million-pink-900: #520057;
--color-sixteen-million-pink-950: #36003b;
}SCSS
$sixteen-million-pink: #fd02ff;
$sixteen-million-pink-rgb: 253, 2, 255;
$sixteen-million-pink-light: mix(#fff, $sixteen-million-pink, 20%);
$sixteen-million-pink-dark: mix(#000, $sixteen-million-pink, 20%);
.element {
color: $sixteen-million-pink;
box-shadow: 0 0 0 2px rgba($sixteen-million-pink, 0.35);
}