Named color · #FFBADF
Bubblegum Heart
Bubblegum Heart is #FFBADF: rgb(255 186 223), hsl(328 100% 86%), oklch(0.863 0.092 345.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Bubblegum Heart color name →
#FFBADF
oklch(0.863 0.092 345.8)
Color conversions
- HEX
- #ffbadf
- RGB
- rgb(255 186 223)
- HSL
- hsl(328 100% 86%)
- HWB
- hwb(328 73% 0%)
- OKLCH
- oklch(0.863 0.092 345.8)
- OKLab
- oklab(0.863 0.089 -0.023)
- CIE Lab
- lab(82.87 29.68 -8.23)
- LCH
- lch(82.87 30.8 344.5)
- CMYK
- cmyk(0% 27% 13% 0%)
Tints · Shades · Tones
Tints
- FFC1E2
- FFC8E5
- FFCFE9
- FFD6EC
- FFDDEF
- FFE4F2
- FFEAF5
- FFF1F9
- FFF8FC
Shades
- DEA1C2
- BE89A5
- 9E728A
- 805C6F
- 634656
- 48323D
- 2E1E27
- 160D12
- 030202
Tones
- F2B4D5
- E5AECB
- D8A9C2
- CBA3B8
- BF9DAE
- B297A5
- A5919C
- 998C92
- 8C8689
Color harmonies
Complementary +180°
- FFBADF
Bubblegum Heart
- 96E6C4
≈ Green Gum
Analogous -30° +30°
- FFBADF
Bubblegum Heart
- EAC0FB
≈ Light Lavender
- FFBFC2
≈ Piglet
Triadic +120° +240°
- FFBADF
Bubblegum Heart
- DAD68F
≈ Flax Fibre
- 90DFFF
≈ Tranquil Pool
Split-complementary +150° +210°
- FFBADF
Bubblegum Heart
- B7E0A4
≈ Basil Smash
- 84E5E5
≈ Aqua Fiesta
Tetradic +90° +180° +270°
- FFBADF
Bubblegum Heart
- F5CA8D
≈ Beacon Yellow
- 96E6C4
≈ Green Gum
- B5D5FF
≈ Ice Cold Stare
Contrast & accessibility
Ag
FailOn white
WCAG 1.57:1 · APCA Lc 26
Ag
AAAOn black
WCAG 13.34:1 · APCA Lc 77
Best text color: #000000
WCAG 13.34:1 (AAA) · APCA Lc 77
Contrast pairs
Code snippets
CSS
:root {
--bubblegum-heart: #ffbadf;
--bubblegum-heart-rgb: 255 186 223;
--bubblegum-heart-oklch: oklch(0.863 0.092 345.8);
}
.element {
color: var(--bubblegum-heart);
background-color: hsl(328 100% 86%);
border-color: oklch(0.863 0.092 345.8);
}Tailwind CSS v4
@theme {
--color-bubblegum-heart: #ffbadf;
--color-bubblegum-heart-50: #ffebfa;
--color-bubblegum-heart-100: #ffdced;
--color-bubblegum-heart-200: #f3c5db;
--color-bubblegum-heart-300: #dca5c0;
--color-bubblegum-heart-400: #c688aa;
--color-bubblegum-heart-500: #b26c93;
--color-bubblegum-heart-600: #965c7d;
--color-bubblegum-heart-700: #794964;
--color-bubblegum-heart-800: #59354a;
--color-bubblegum-heart-900: #3e2434;
--color-bubblegum-heart-950: #27131f;
}SCSS
$bubblegum-heart: #ffbadf;
$bubblegum-heart-rgb: 255, 186, 223;
$bubblegum-heart-light: mix(#fff, $bubblegum-heart, 20%);
$bubblegum-heart-dark: mix(#000, $bubblegum-heart, 20%);
.element {
color: $bubblegum-heart;
box-shadow: 0 0 0 2px rgba($bubblegum-heart, 0.35);
}