Named color · #FF399C
Knockout Pink
Knockout Pink is #FF399C: rgb(255 57 156), hsl(330 100% 61%), oklch(0.675 0.242 355.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Knockout Pink color name →
#FF399C
oklch(0.675 0.242 355.8)
Color conversions
- HEX
- #ff399c
- RGB
- rgb(255 57 156)
- HSL
- hsl(330 100% 61%)
- HWB
- hwb(330 22% 0%)
- OKLCH
- oklch(0.675 0.242 355.8)
- OKLab
- oklab(0.675 0.242 -0.018)
- CIE Lab
- lab(59.16 77.57 -5.69)
- LCH
- lch(59.16 77.78 355.8)
- CMYK
- cmyk(0% 78% 39% 0%)
Tints · Shades · Tones
Tints
- FF56A6
- FF6DAF
- FF82B9
- FF95C3
- FFA8CC
- FFBAD6
- FFCBE0
- FFDDEB
- FFEEF5
Shades
- DE3087
- BE2873
- 9E1F5F
- 80174C
- 631039
- 480928
- 2E0418
- 160109
- 030001
Tones
- F44899
- E85396
- DC5C94
- D06491
- C46A8E
- B8708B
- AB7588
- 9D7986
- 8F7D83
Color harmonies
Complementary +180°
- FF399C
Knockout Pink
- 00B093
≈ Victorian Greenhouse
Analogous -30° +30°
- FF399C
Knockout Pink
- DD4FE5
≈ Alita Pink
- FF4F4C
≈ Red Orange Juice
Triadic +120° +240°
- FF399C
Knockout Pink
- 93A100
≈ Noxious
- 00A3E3
≈ Vanadyl Blue
Split-complementary +150° +210°
- FF399C
Knockout Pink
- 00B639
≈ Try Your Luck
- 00AAB9
≈ Bluebird
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 3.32:1 · APCA Lc 59
Ag
AAOn black
WCAG 6.31:1 · APCA Lc 43
Best text color: #000000
WCAG 6.31:1 (AA) · APCA Lc 43
Contrast pairs
Code snippets
CSS
:root {
--knockout-pink: #ff399c;
--knockout-pink-rgb: 255 57 156;
--knockout-pink-oklch: oklch(0.675 0.242 355.8);
}
.element {
color: var(--knockout-pink);
background-color: hsl(330 100% 61%);
border-color: oklch(0.675 0.242 355.8);
}Tailwind CSS v4
@theme {
--color-knockout-pink: #ff399c;
--color-knockout-pink-50: #ffd9f5;
--color-knockout-pink-100: #ffc6e8;
--color-knockout-pink-200: #ffa6d4;
--color-knockout-pink-300: #ff7ab7;
--color-knockout-pink-400: #ff4ca3;
--color-knockout-pink-500: #f3008c;
--color-knockout-pink-600: #cd0076;
--color-knockout-pink-700: #a5005f;
--color-knockout-pink-800: #7b0048;
--color-knockout-pink-900: #570232;
--color-knockout-pink-950: #3a001e;
}SCSS
$knockout-pink: #ff399c;
$knockout-pink-rgb: 255, 57, 156;
$knockout-pink-light: mix(#fff, $knockout-pink, 20%);
$knockout-pink-dark: mix(#000, $knockout-pink, 20%);
.element {
color: $knockout-pink;
box-shadow: 0 0 0 2px rgba($knockout-pink, 0.35);
}