Nearest named color · #FF20B3
#FF20B3
Nearest named color: Pink Hysteria
#FF20B3 (rgb(255 32 179), hsl(320 100% 56%), oklch(0.671 0.27 347.6)) is closest to the named color Pink Hysteria. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#FF20B3
oklch(0.671 0.27 347.6)
Color conversions
- HEX
- #ff20b3
- RGB
- rgb(255 32 179)
- HSL
- hsl(320 100% 56%)
- HWB
- hwb(320 13% 0%)
- OKLCH
- oklch(0.671 0.27 347.6)
- OKLab
- oklab(0.671 0.263 -0.058)
- CIE Lab
- lab(58.05 84.13 -20.75)
- LCH
- lch(58.05 86.65 346.1)
- CMYK
- cmyk(0% 87% 30% 0%)
Tints · Shades · Tones
Tints
- FF49BB
- FF64C2
- FF7BCA
- FF90D2
- FFA4D9
- FFB7E1
- FFC9E8
- FFDBF0
- FFEDF7
Shades
- DE1A9B
- BE1584
- 9E0F6E
- 800A58
- 630643
- 48032F
- 2E011D
- 16000C
- 030001
Tones
- F439AE
- E849A9
- DC54A4
- D15E9F
- C4669A
- B86D95
- AB728F
- 9D788A
- 8F7C85
Color harmonies
Complementary +180°
- FF20B3
Pink Hysteria
- 00AF84
≈ Dark Mountain Meadow
Analogous -30° +30°
- FF20B3
Pink Hysteria
- D546FE
≈ Geisha Pink
- FF4761
≈ Magic Potion
Triadic +120° +240°
- FF20B3
Pink Hysteria
- 9F9B00
≈ Papyrus
- 00A4D3
≈ Charybdis
Split-complementary +150° +210°
- FF20B3
Pink Hysteria
- 4BB000
≈ Kermit Green
- 00AAAE
≈ Fiji
Tetradic +90° +180° +270°
- FF20B3
Pink Hysteria
- C48800
≈ Auric
- 00AF84
≈ Dark Mountain Meadow
- 4894FF
≈ Polar Glow
Contrast & accessibility
Ag
FailOn white
WCAG 3.43:1 · APCA Lc 60
Ag
AAOn black
WCAG 6.10:1 · APCA Lc 42
Best text color: #000000
WCAG 6.10:1 (AA) · APCA Lc 42
Contrast pairs
Code snippets
CSS
:root {
--pink-hysteria: #ff20b3;
--pink-hysteria-rgb: 255 32 179;
--pink-hysteria-oklch: oklch(0.671 0.27 347.6);
}
.element {
color: var(--pink-hysteria);
background-color: hsl(320 100% 56%);
border-color: oklch(0.671 0.27 347.6);
}Tailwind CSS v4
@theme {
--color-pink-hysteria: #ff20b3;
--color-pink-hysteria-50: #ffd6ff;
--color-pink-hysteria-100: #ffc2f5;
--color-pink-hysteria-200: #ffa1e5;
--color-pink-hysteria-300: #ff72cc;
--color-pink-hysteria-400: #ff3ebb;
--color-pink-hysteria-500: #f400a6;
--color-pink-hysteria-600: #ce008c;
--color-pink-hysteria-700: #a60070;
--color-pink-hysteria-800: #7b0056;
--color-pink-hysteria-900: #57003c;
--color-pink-hysteria-950: #3a0026;
}SCSS
$pink-hysteria: #ff20b3;
$pink-hysteria-rgb: 255, 32, 179;
$pink-hysteria-light: mix(#fff, $pink-hysteria, 20%);
$pink-hysteria-dark: mix(#000, $pink-hysteria, 20%);
.element {
color: $pink-hysteria;
box-shadow: 0 0 0 2px rgba($pink-hysteria, 0.35);
}