Named color · #FE01B1
Pink Hysteria
Pink Hysteria is #FE01B1: rgb(254 1 177), hsl(318 99% 50%), oklch(0.661 0.278 347.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Pink Hysteria color name →
#FE01B1
oklch(0.661 0.278 347.5)
Color conversions
- HEX
- #fe01b1
- RGB
- rgb(254 1 177)
- HSL
- hsl(318 99% 50%)
- HWB
- hwb(318 0% 0%)
- OKLCH
- oklch(0.661 0.278 347.5)
- OKLab
- oklab(0.661 0.271 -0.06)
- CIE Lab
- lab(56.82 86.52 -21.47)
- LCH
- lch(56.82 89.15 346.1)
- CMYK
- cmyk(0% 100% 30% 0%)
Tints · Shades · Tones
Tints
- FF40B9
- FF5EC1
- FF77C9
- FF8CD0
- FFA1D8
- FFB5E0
- FFC8E8
- FFDAEF
- FFEDF7
Shades
- DD0199
- BD0183
- 9E006C
- 800057
- 630042
- 47002F
- 2D001C
- 16000C
- 030001
Tones
- F32FAC
- E842A7
- DC4FA2
- D05A9E
- C46399
- B86A94
- AB718F
- 9E778A
- 8F7C85
Color harmonies
Complementary +180°
- FE01B1
Pink Hysteria
- 00AC82
≈ Simply Green
Analogous -30° +30°
- FE01B1
Pink Hysteria
- D33DFE
≈ Pink Insanity
- FF3C5C
≈ Sizzling Red
Triadic +120° +240°
- FE01B1
Pink Hysteria
- 9C9800
≈ Papyrus
- 00A1CF
≈ Charybdis
Split-complementary +150° +210°
- FE01B1
Pink Hysteria
- 4AAD00
≈ Early Dew
- 00A7AB
≈ Blue Bolero
Tetradic +90° +180° +270°
- FE01B1
Pink Hysteria
- C18600
≈ Yellow Gold
- 00AC82
≈ Simply Green
- 4190FF
≈ Clear Chill
Contrast & accessibility
Ag
FailOn white
WCAG 3.58:1 · APCA Lc 61
Ag
AAOn black
WCAG 5.85:1 · APCA Lc 41
Best text color: #000000
WCAG 5.85:1 (AA) · APCA Lc 41
Contrast pairs
Code snippets
CSS
:root {
--pink-hysteria: #fe01b1;
--pink-hysteria-rgb: 254 1 177;
--pink-hysteria-oklch: oklch(0.661 0.278 347.5);
}
.element {
color: var(--pink-hysteria);
background-color: hsl(318 99% 50%);
border-color: oklch(0.661 0.278 347.5);
}Tailwind CSS v4
@theme {
--color-pink-hysteria: #fe01b1;
--color-pink-hysteria-50: #ffd4ff;
--color-pink-hysteria-100: #ffc1f6;
--color-pink-hysteria-200: #ff9fe6;
--color-pink-hysteria-300: #ff6fcc;
--color-pink-hysteria-400: #ff37bc;
--color-pink-hysteria-500: #f700a7;
--color-pink-hysteria-600: #d1008d;
--color-pink-hysteria-700: #a80071;
--color-pink-hysteria-800: #7d0057;
--color-pink-hysteria-900: #58003d;
--color-pink-hysteria-950: #3b0026;
}SCSS
$pink-hysteria: #fe01b1;
$pink-hysteria-rgb: 254, 1, 177;
$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);
}