Warna bernama · #FF77FF
Fuchsia Pink
Fuchsia Pink adalah #FF77FF: rgb(255 119 255), hsl(300 100% 73%), oklch(0.776 0.228 327.5). Lihat tint, shade, harmoni, kontras WCAG & APCA, serta kode CSS, Tailwind v4, dan SCSS.
What does Purple mean? → · Fuchsia Pink color name →
#FF77FF
oklch(0.776 0.228 327.5)
Konversi warna
- 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%)
Tint · Shade · Tone
Tint
- FF87FF
- FF96FF
- FFA4FF
- FFB2FF
- FFBFFF
- FFCDFF
- FFD9FF
- FFE6FF
- FFF3FF
Shade
- DE67DE
- BE57BE
- 9E479E
- 803880
- 632A63
- 481C48
- 2E102E
- 160516
- 030103
Tone
- F27AF2
- E67CE5
- D97ED8
- CD80CC
- C081BF
- B481B2
- A781A6
- 9A8199
- 8D818D
Harmoni warna
Komplementer +180°
- FF77FF
Fuchsia Pink
- 00DB55
≈ Malachite
Analog -30° +30°
- FF77FF
Fuchsia Pink
- C0A3FF
≈ Diva
- FF8CB6
≈ Cochonnet
Triadik +120° +240°
- FF77FF
Fuchsia Pink
- E1AE00
≈ Mustard Yellow
- 00CDE2
≈ Picnic Day Sky
Split-komplementer +150° +210°
- FF77FF
Fuchsia Pink
- AEC400
≈ Slime
- 00D3B5
≈ Mint Leaf
Tetradik +90° +180° +270°
- FF77FF
Fuchsia Pink
- FF9A43
≈ Orange Hibiscus
- 00DB55
≈ Malachite
- 58C2FF
≈ Blue Mana
Kontras & aksesibilitas
Ag
FailDi atas putih
WCAG 2.24:1 · APCA Lc 44
Ag
AAADi atas hitam
WCAG 9.33:1 · APCA Lc 58
Warna teks terbaik: #000000
WCAG 9.33:1 (AAA) · APCA Lc 58
Contrast pairs
Cuplikan kode
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);
}