Named color · #FF22FF
New Wave Pink
New Wave Pink is #FF22FF: rgb(255 34 255), hsl(300 100% 57%), oklch(0.709 0.313 328.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · New Wave Pink color name →
#FF22FF
oklch(0.709 0.313 328.3)
Color conversions
- HEX
- #ff22ff
- RGB
- rgb(255 34 255)
- HSL
- hsl(300 100% 57%)
- HWB
- hwb(300 13% 0%)
- OKLCH
- oklch(0.709 0.313 328.3)
- OKLab
- oklab(0.709 0.266 -0.165)
- CIE Lab
- lab(61.18 90.66 -58.89)
- LCH
- lch(61.18 108.1 327)
- CMYK
- cmyk(0% 87% 0% 0%)
Tints · Shades · Tones
Tints
- FF4EFF
- FF6AFF
- FF81FF
- FF95FF
- FFA8FF
- FFBBFF
- FFCCFF
- FFDEFF
- FFEEFF
Shades
- DE1CDE
- BE16BE
- 9E119E
- 800B80
- 630763
- 480348
- 2E012E
- 160016
- 030003
Tones
- F33DF2
- E74DE6
- DB59D9
- CF62CC
- C26AC0
- B670B3
- A975A7
- 9C799A
- 8E7D8D
Color harmonies
Complementary +180°
- FF22FF
New Wave Pink
- 00C150
≈ Lǜ Sè Green
Analogous -30° +30°
- FF22FF
New Wave Pink
- B084FF
≈ Lilac Geode
- FF5EA0
≈ Neon Sunset
Triadic +120° +240°
- FF22FF
New Wave Pink
- C69B00
≈ Molten Bronze
- 00B6C9
≈ Lago Blue
Split-complementary +150° +210°
- FF22FF
New Wave Pink
- 98AE00
≈ Elysia Chlorotica
- 00BBA2
≈ Aare River
Tetradic +90° +180° +270°
- FF22FF
New Wave Pink
- EC8100
≈ Rè Dài Chéng Orange
- 00C150
≈ Lǜ Sè Green
- 00ADF7
≈ Democrat
Contrast & accessibility
Ag
FailOn white
WCAG 3.03:1 · APCA Lc 55
Ag
AAOn black
WCAG 6.92:1 · APCA Lc 47
Best text color: #000000
WCAG 6.92:1 (AA) · APCA Lc 47
Contrast pairs
Code snippets
CSS
:root {
--new-wave-pink: #ff22ff;
--new-wave-pink-rgb: 255 34 255;
--new-wave-pink-oklch: oklch(0.709 0.313 328.3);
}
.element {
color: var(--new-wave-pink);
background-color: hsl(300 100% 57%);
border-color: oklch(0.709 0.313 328.3);
}Tailwind CSS v4
@theme {
--color-new-wave-pink: #ff22ff;
--color-new-wave-pink-50: #ffd4ff;
--color-new-wave-pink-100: #ffc0ff;
--color-new-wave-pink-200: #ff9eff;
--color-new-wave-pink-300: #ff6dff;
--color-new-wave-pink-400: #f830f7;
--color-new-wave-pink-500: #e600e9;
--color-new-wave-pink-600: #c300c4;
--color-new-wave-pink-700: #9d009e;
--color-new-wave-pink-800: #730079;
--color-new-wave-pink-900: #510056;
--color-new-wave-pink-950: #36003a;
}SCSS
$new-wave-pink: #ff22ff;
$new-wave-pink-rgb: 255, 34, 255;
$new-wave-pink-light: mix(#fff, $new-wave-pink, 20%);
$new-wave-pink-dark: mix(#000, $new-wave-pink, 20%);
.element {
color: $new-wave-pink;
box-shadow: 0 0 0 2px rgba($new-wave-pink, 0.35);
}