Couleur nommée · #CC69E4
Purple Snail
Purple Snail correspond à #CC69E4 : rgb(204 105 228), hsl(288 69% 65%), oklch(0.683 0.197 319.5). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Purple mean? → · Purple Snail color name →
#CC69E4
oklch(0.683 0.197 319.5)
Conversions de couleur
- HEX
- #cc69e4
- RGB
- rgb(204 105 228)
- HSL
- hsl(288 69% 65%)
- HWB
- hwb(288 41% 11%)
- OKLCH
- oklch(0.683 0.197 319.5)
- OKLab
- oklab(0.683 0.15 -0.128)
- CIE Lab
- lab(60.13 53.48 -46.18)
- LCH
- lch(60.13 70.66 319.2)
- CMYK
- cmyk(11% 54% 0% 11%)
Teintes · Ombres · Tons
Teintes
- D27AE7
- D889EB
- DD99EE
- E2A8F1
- E8B6F4
- EDC5F6
- F1D4F9
- F6E2FB
- FBF1FD
Ombres
- B15AC6
- 974CA9
- 7E3E8D
- 653172
- 4E2458
- 37183F
- 220C28
- 0F0412
- 020003
Tons
- C56DDA
- BD71D0
- B674C6
- AE76BC
- A779B2
- 9F7BA8
- 987C9E
- 907E94
- 887F8A
Harmonies de couleurs
Complémentaire +180°
- CC69E4
Purple Snail
- 4BB429
≈ Try Your Luck
Analogue -30° +30°
- CC69E4
Purple Snail
- 9981FF
≈ Periwinkle
- ED5AAB
≈ Fugitive Flamingo
Triadique +120° +240°
- CC69E4
Purple Snail
- C78D00
≈ Festering Brown
- 00AEB5
≈ Mermaid Treasure
Complémentaire divisée +150° +210°
- CC69E4
Purple Snail
- A0A000
≈ Fistfull of Green
- 00B38B
≈ Chromophobia Green
Tétradique +90° +180° +270°
- CC69E4
Purple Snail
- EE6F00
≈ Clementine
- 4BB429
≈ Try Your Luck
- 00A7DB
≈ Malibu Blue
Contraste et accessibilité
Ag
FailSur blanc
WCAG 3.13:1 · APCA Lc 58
Ag
AASur noir
WCAG 6.70:1 · APCA Lc 44
Meilleure couleur de texte: #000000
WCAG 6.70:1 (AA) · APCA Lc 44
Contrast pairs
Extraits de code
CSS
:root {
--purple-snail: #cc69e4;
--purple-snail-rgb: 204 105 228;
--purple-snail-oklch: oklch(0.683 0.197 319.5);
}
.element {
color: var(--purple-snail);
background-color: hsl(288 69% 65%);
border-color: oklch(0.683 0.197 319.5);
}Tailwind CSS v4
@theme {
--color-purple-snail: #cc69e4;
--color-purple-snail-50: #ffe3ff;
--color-purple-snail-100: #ffd3ff;
--color-purple-snail-200: #fbb8ff;
--color-purple-snail-300: #e593f4;
--color-purple-snail-400: #cf72e6;
--color-purple-snail-500: #bc4dd6;
--color-purple-snail-600: #9f42b4;
--color-purple-snail-700: #7f3591;
--color-purple-snail-800: #5d266e;
--color-purple-snail-900: #41194d;
--color-purple-snail-950: #2a0933;
}SCSS
$purple-snail: #cc69e4;
$purple-snail-rgb: 204, 105, 228;
$purple-snail-light: mix(#fff, $purple-snail, 20%);
$purple-snail-dark: mix(#000, $purple-snail, 20%);
.element {
color: $purple-snail;
box-shadow: 0 0 0 2px rgba($purple-snail, 0.35);
}