Named color · #F5B9D8
Manga Pink
Manga Pink is #F5B9D8: rgb(245 185 216), hsl(329 75% 84%), oklch(0.849 0.079 346.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Manga Pink color name →
#F5B9D8
oklch(0.849 0.079 346.5)
Color conversions
- HEX
- #f5b9d8
- RGB
- rgb(245 185 216)
- HSL
- hsl(329 75% 84%)
- HWB
- hwb(329 73% 4%)
- OKLCH
- oklch(0.849 0.079 346.5)
- OKLab
- oklab(0.849 0.077 -0.018)
- CIE Lab
- lab(81.43 25.79 -6.74)
- LCH
- lch(81.43 26.65 345.4)
- CMYK
- cmyk(0% 24% 12% 4%)
Tints · Shades · Tones
Tints
- F6C0DC
- F8C7E0
- F9CEE4
- FAD5E8
- FBDCEB
- FCE3EF
- FDEAF3
- FEF1F7
- FEF8FB
Shades
- D5A0BC
- B689A0
- 987185
- 7B5B6B
- 5F4653
- 44313B
- 2B1E25
- 150D11
- 030202
Tones
- E9B3CF
- DDAEC6
- D1A8BD
- C5A2B4
- BA9CAB
- AE97A2
- A2919A
- 978B91
- 8B8688
Color harmonies
Complementary +180°
- F5B9D8
Manga Pink
- 9BDFC2
≈ Almost Aqua
Analogous -30° +30°
- F5B9D8
Manga Pink
- E3BEF1
≈ Beefy Pink
- FDB9BB
≈ Hard Candy
Triadic +120° +240°
- F5B9D8
Manga Pink
- D3D295
≈ Lemon Fennel
- 95D9F6
≈ Shiva Blue
Split-complementary +150° +210°
- F5B9D8
Manga Pink
- B6DAA7
≈ Embroidered Silk
- 8DDEDF
≈ Paradisiacal Getaway
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.63:1 · APCA Lc 28
Ag
AAAOn black
WCAG 12.81:1 · APCA Lc 75
Best text color: #000000
WCAG 12.81:1 (AAA) · APCA Lc 75
Contrast pairs
Code snippets
CSS
:root {
--manga-pink: #f5b9d8;
--manga-pink-rgb: 245 185 216;
--manga-pink-oklch: oklch(0.849 0.079 346.5);
}
.element {
color: var(--manga-pink);
background-color: hsl(329 75% 84%);
border-color: oklch(0.849 0.079 346.5);
}Tailwind CSS v4
@theme {
--color-manga-pink: #f5b9d8;
--color-manga-pink-50: #ffecf9;
--color-manga-pink-100: #fddeec;
--color-manga-pink-200: #efc7da;
--color-manga-pink-300: #d7a7be;
--color-manga-pink-400: #c28ca8;
--color-manga-pink-500: #ad7091;
--color-manga-pink-600: #925f7a;
--color-manga-pink-700: #754c62;
--color-manga-pink-800: #563749;
--color-manga-pink-900: #3c2633;
--color-manga-pink-950: #26141e;
}SCSS
$manga-pink: #f5b9d8;
$manga-pink-rgb: 245, 185, 216;
$manga-pink-light: mix(#fff, $manga-pink, 20%);
$manga-pink-dark: mix(#000, $manga-pink, 20%);
.element {
color: $manga-pink;
box-shadow: 0 0 0 2px rgba($manga-pink, 0.35);
}