Cor nomeada · #FF77FF
Fuchsia Pink
Fuchsia Pink é #FF77FF: rgb(255 119 255), hsl(300 100% 73%), oklch(0.776 0.228 327.5). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Purple mean? → · Fuchsia Pink color name →
#FF77FF
oklch(0.776 0.228 327.5)
Conversões de cor
- HEX
- #ff77ff
- RGB
- rgb(255 119 255)
- HSL
- hsl(300 100% 73%)
- HWB
- hwb(300 47% 0%)
- OKLCH
- oklch(0.776 0.228 327.5)
- OKLab
- oklab(0.776 0.192 -0.122)
- CIE Lab
- lab(70.55 65.38 -44.16)
- LCH
- lch(70.55 78.9 326)
- CMYK
- cmyk(0% 53% 0% 0%)
Tons claros · Sombras · Tons
Tons claros
- FF87FF
- FF96FF
- FFA4FF
- FFB2FF
- FFBFFF
- FFCDFF
- FFD9FF
- FFE6FF
- FFF3FF
Sombras
- DE67DE
- BE57BE
- 9E479E
- 803880
- 632A63
- 481C48
- 2E102E
- 160516
- 030103
Tons
- F27AF2
- E67CE5
- D97ED8
- CD80CC
- C081BF
- B481B2
- A781A6
- 9A8199
- 8D818D
Harmonias de cor
Complementar +180°
- FF77FF
Fuchsia Pink
- 00DB55
≈ Malachite
Análoga -30° +30°
- FF77FF
Fuchsia Pink
- C0A3FF
≈ Diva
- FF8CB6
≈ Cochonnet
Tríade +120° +240°
- FF77FF
Fuchsia Pink
- E1AE00
≈ Mustard Yellow
- 00CDE2
≈ Picnic Day Sky
Complementar dividida +150° +210°
- FF77FF
Fuchsia Pink
- AEC400
≈ Slime
- 00D3B5
≈ Mint Leaf
Tétrade +90° +180° +270°
- FF77FF
Fuchsia Pink
- FF9A43
≈ Orange Hibiscus
- 00DB55
≈ Malachite
- 58C2FF
≈ Blue Mana
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.24:1 · APCA Lc 44
Ag
AAASobre preto
WCAG 9.33:1 · APCA Lc 58
Melhor cor de texto: #000000
WCAG 9.33:1 (AAA) · APCA Lc 58
Contrast pairs
Trechos de código
CSS
:root {
--fuchsia-pink: #ff77ff;
--fuchsia-pink-rgb: 255 119 255;
--fuchsia-pink-oklch: oklch(0.776 0.228 327.5);
}
.element {
color: var(--fuchsia-pink);
background-color: hsl(300 100% 73%);
border-color: oklch(0.776 0.228 327.5);
}Tailwind CSS v4
@theme {
--color-fuchsia-pink: #ff77ff;
--color-fuchsia-pink-50: #ffdeff;
--color-fuchsia-pink-100: #ffcdff;
--color-fuchsia-pink-200: #ffb0ff;
--color-fuchsia-pink-300: #f688ef;
--color-fuchsia-pink-400: #e163e2;
--color-fuchsia-pink-500: #cf33d1;
--color-fuchsia-pink-600: #af2eb0;
--color-fuchsia-pink-700: #8c258e;
--color-fuchsia-pink-800: #671a6c;
--color-fuchsia-pink-900: #48114c;
--color-fuchsia-pink-950: #2f0232;
}SCSS
$fuchsia-pink: #ff77ff;
$fuchsia-pink-rgb: 255, 119, 255;
$fuchsia-pink-light: mix(#fff, $fuchsia-pink, 20%);
$fuchsia-pink-dark: mix(#000, $fuchsia-pink, 20%);
.element {
color: $fuchsia-pink;
box-shadow: 0 0 0 2px rgba($fuchsia-pink, 0.35);
}