Couleur nommée · #FF22FF
New Wave Pink
New Wave Pink correspond à #FF22FF : rgb(255 34 255), hsl(300 100% 57%), oklch(0.709 0.313 328.3). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Purple mean? → · New Wave Pink color name →
#FF22FF
oklch(0.709 0.313 328.3)
Conversions de couleur
- 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%)
Teintes · Ombres · Tons
Teintes
- FF4EFF
- FF6AFF
- FF81FF
- FF95FF
- FFA8FF
- FFBBFF
- FFCCFF
- FFDEFF
- FFEEFF
Ombres
- DE1CDE
- BE16BE
- 9E119E
- 800B80
- 630763
- 480348
- 2E012E
- 160016
- 030003
Tons
- F33DF2
- E74DE6
- DB59D9
- CF62CC
- C26AC0
- B670B3
- A975A7
- 9C799A
- 8E7D8D
Harmonies de couleurs
Complémentaire +180°
- FF22FF
New Wave Pink
- 00C150
≈ Lǜ Sè Green
Analogue -30° +30°
- FF22FF
New Wave Pink
- B084FF
≈ Lilac Geode
- FF5EA0
≈ Neon Sunset
Triadique +120° +240°
- FF22FF
New Wave Pink
- C69B00
≈ Molten Bronze
- 00B6C9
≈ Lago Blue
Complémentaire divisée +150° +210°
- FF22FF
New Wave Pink
- 98AE00
≈ Elysia Chlorotica
- 00BBA2
≈ Aare River
Tétradique +90° +180° +270°
- FF22FF
New Wave Pink
- EC8100
≈ Rè Dài Chéng Orange
- 00C150
≈ Lǜ Sè Green
- 00ADF7
≈ Democrat
Contraste et accessibilité
Ag
FailSur blanc
WCAG 3.03:1 · APCA Lc 55
Ag
AASur noir
WCAG 6.92:1 · APCA Lc 47
Meilleure couleur de texte: #000000
WCAG 6.92:1 (AA) · APCA Lc 47
Contrast pairs
Extraits de code
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);
}