Named color · #FF77A8
Pico-8 Pink
Pico-8 Pink is #FF77A8: rgb(255 119 168), hsl(338 100% 73%), oklch(0.742 0.172 359.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Pico-8 Pink color name →
#FF77A8
oklch(0.742 0.172 359.5)
Color conversions
- HEX
- #ff77a8
- RGB
- rgb(255 119 168)
- HSL
- hsl(338 100% 73%)
- HWB
- hwb(338 47% 0%)
- OKLCH
- oklch(0.742 0.172 359.5)
- OKLab
- oklab(0.742 0.172 -0.002)
- CIE Lab
- lab(67.91 56.26 0.13)
- LCH
- lch(67.91 56.26 0.1)
- CMYK
- cmyk(0% 53% 34% 0%)
Tints · Shades · Tones
Tints
- FF86B0
- FF94B9
- FFA2C1
- FFB0CA
- FFBDD3
- FFCBDB
- FFD8E4
- FFE5ED
- FFF2F6
Shades
- DE6792
- BE577C
- 9E4767
- 803852
- 632A3F
- 481C2C
- 2E101A
- 16050A
- 030101
Tones
- F379A4
- E77BA0
- DA7D9C
- CE7E98
- C17F94
- B58090
- A8808C
- 9B8088
- 8E8084
Color harmonies
Complementary +180°
- FF77A8
Pico-8 Pink
- 00C7AE
≈ Amazonite
Analogous -30° +30°
- FF77A8
Pico-8 Pink
- E67FDF
≈ Lavender Magenta
- FF816F
≈ Fusion Coral
Triadic +120° +240°
- FF77A8
Pico-8 Pink
- A0BA11
≈ Bright Olive
- 39B6FF
≈ Cherenkov Radiation
Split-complementary +150° +210°
- FF77A8
Pico-8 Pink
- 48C86D
≈ Zombie Green
- 00C1D7
≈ The Crowd Roars!
Tetradic +90° +180° +270°
- FF77A8
Pico-8 Pink
- D1A500
≈ Prehnite Yellow
- 00C7AE
≈ Amazonite
- 8AA7FF
≈ Widowmaker
Contrast & accessibility
Ag
FailOn white
WCAG 2.48:1 · APCA Lc 48
Ag
AAAOn black
WCAG 8.45:1 · APCA Lc 54
Best text color: #000000
WCAG 8.45:1 (AAA) · APCA Lc 54
Contrast pairs
Code snippets
CSS
:root {
--pico-8-pink: #ff77a8;
--pico-8-pink-rgb: 255 119 168;
--pico-8-pink-oklch: oklch(0.742 0.172 359.5);
}
.element {
color: var(--pico-8-pink);
background-color: hsl(338 100% 73%);
border-color: oklch(0.742 0.172 359.5);
}Tailwind CSS v4
@theme {
--color-pico-8-pink: #ff77a8;
--color-pico-8-pink-50: #ffe1f2;
--color-pico-8-pink-100: #ffd0e4;
--color-pico-8-pink-200: #ffb5cf;
--color-pico-8-pink-300: #ff90b1;
--color-pico-8-pink-400: #ed6d9b;
--color-pico-8-pink-500: #da4783;
--color-pico-8-pink-600: #b83e6f;
--color-pico-8-pink-700: #943158;
--color-pico-8-pink-800: #6e2243;
--color-pico-8-pink-900: #4e172e;
--color-pico-8-pink-950: #33071b;
}SCSS
$pico-8-pink: #ff77a8;
$pico-8-pink-rgb: 255, 119, 168;
$pico-8-pink-light: mix(#fff, $pico-8-pink, 20%);
$pico-8-pink-dark: mix(#000, $pico-8-pink, 20%);
.element {
color: $pico-8-pink;
box-shadow: 0 0 0 2px rgba($pico-8-pink, 0.35);
}