Named color · #FF22EE
Pink Kitsch
Pink Kitsch is #FF22EE: rgb(255 34 238), hsl(305 100% 57%), oklch(0.699 0.302 332.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Pink Kitsch color name →
#FF22EE
oklch(0.699 0.302 332.1)
Color conversions
- HEX
- #ff22ee
- RGB
- rgb(255 34 238)
- HSL
- hsl(305 100% 57%)
- HWB
- hwb(305 13% 0%)
- OKLCH
- oklch(0.699 0.302 332.1)
- OKLab
- oklab(0.699 0.267 -0.141)
- CIE Lab
- lab(60.41 88.94 -50.68)
- LCH
- lch(60.41 102.36 330.3)
- CMYK
- cmyk(0% 87% 7% 0%)
Tints · Shades · Tones
Tints
- FF4DF1
- FF68F3
- FF7FF5
- FF94F7
- FFA7F9
- FFBAFB
- FFCCFC
- FFDDFD
- FFEEFE
Shades
- DE1CCF
- BE16B1
- 9E1193
- 800B77
- 63075C
- 480342
- 2E012A
- 160014
- 030003
Tones
- F33CE3
- E74CD8
- DB58CD
- CF61C2
- C369B7
- B66FAC
- AA74A1
- 9C7996
- 8F7D8B
Color harmonies
Complementary +180°
- FF22EE
Pink Kitsch
- 00BD61
≈ Green Elliott
Analogous -30° +30°
- FF22EE
Pink Kitsch
- B57BFF
≈ Illicit Purple
- FF5894
≈ Fuchsia Fever
Triadic +120° +240°
- FF22EE
Pink Kitsch
- BE9A00
≈ Perennial
- 00B1CA
≈ Havasupai Falls
Split-complementary +150° +210°
- FF22EE
Pink Kitsch
- 8DAD00
≈ Gameboy Screen
- 00B7A4
≈ Aare River
Tetradic +90° +180° +270°
- FF22EE
Pink Kitsch
- E38300
≈ Fulvous
- 00BD61
≈ Green Elliott
- 00A7FB
≈ Protoss Pylon
Contrast & accessibility
Ag
FailOn white
WCAG 3.12:1 · APCA Lc 56
Ag
AAOn black
WCAG 6.71:1 · APCA Lc 46
Best text color: #000000
WCAG 6.71:1 (AA) · APCA Lc 46
Contrast pairs
Code snippets
CSS
:root {
--pink-kitsch: #ff22ee;
--pink-kitsch-rgb: 255 34 238;
--pink-kitsch-oklch: oklch(0.699 0.302 332.1);
}
.element {
color: var(--pink-kitsch);
background-color: hsl(305 100% 57%);
border-color: oklch(0.699 0.302 332.1);
}Tailwind CSS v4
@theme {
--color-pink-kitsch: #ff22ee;
--color-pink-kitsch-50: #ffd4ff;
--color-pink-kitsch-100: #ffc1ff;
--color-pink-kitsch-200: #ff9eff;
--color-pink-kitsch-300: #ff6ef5;
--color-pink-kitsch-400: #fb34ea;
--color-pink-kitsch-500: #ea00da;
--color-pink-kitsch-600: #c500b8;
--color-pink-kitsch-700: #9f0094;
--color-pink-kitsch-800: #750072;
--color-pink-kitsch-900: #530050;
--color-pink-kitsch-950: #370035;
}SCSS
$pink-kitsch: #ff22ee;
$pink-kitsch-rgb: 255, 34, 238;
$pink-kitsch-light: mix(#fff, $pink-kitsch, 20%);
$pink-kitsch-dark: mix(#000, $pink-kitsch, 20%);
.element {
color: $pink-kitsch;
box-shadow: 0 0 0 2px rgba($pink-kitsch, 0.35);
}