Nearest named color · #FFB4DB
#FFB4DB
Nearest named color: Bubblegum Heart
#FFB4DB (rgb(255 180 219), hsl(329 100% 85%), oklch(0.852 0.099 346.9)) is closest to the named color Bubblegum Heart. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#FFB4DB
oklch(0.852 0.099 346.9)
Color conversions
- HEX
- #ffb4db
- RGB
- rgb(255 180 219)
- HSL
- hsl(329 100% 85%)
- HWB
- hwb(329 71% 0%)
- OKLCH
- oklch(0.852 0.099 346.9)
- OKLab
- oklab(0.852 0.097 -0.023)
- CIE Lab
- lab(81.44 32.19 -8.19)
- LCH
- lch(81.44 33.22 345.7)
- CMYK
- cmyk(0% 29% 14% 0%)
Tints · Shades · Tones
Tints
- FFBCDF
- FFC3E2
- FFCBE6
- FFD2E9
- FFDAED
- FFE1F1
- FFE9F4
- FFF0F8
- FFF8FB
Shades
- DE9CBE
- BE85A2
- 9E6E87
- 80586D
- 634454
- 48303C
- 2E1D26
- 160C11
- 030202
Tones
- F2AFD2
- E5AAC8
- D8A5BF
- CB9FB6
- BF9AAC
- B295A3
- A6909A
- 998B92
- 8C8589
Color harmonies
Complementary +180°
- FFB4DB
Bubblegum Heart
- 8BE3C0
≈ Bubble Algae
Analogous -30° +30°
- FFB4DB
Bubblegum Heart
- E9BAFA
≈ Euphoria
- FFB9BB
≈ Hard Candy
Triadic +120° +240°
- FFB4DB
Bubblegum Heart
- D5D385
≈ Treasury
- 87DBFF
≈ Tranquil Pool
Split-complementary +150° +210°
- FFB4DB
Bubblegum Heart
- B0DE9D
≈ Green Gooseberry
- 77E3E4
≈ Turkish Turquoise
Tetradic +90° +180° +270°
- FFB4DB
Bubblegum Heart
- F3C682
≈ Butterscotch Cake
- 8BE3C0
≈ Bubble Algae
- B0D1FF
≈ Ice Cold Stare
Contrast & accessibility
Ag
FailOn white
WCAG 1.64:1 · APCA Lc 28
Ag
AAAOn black
WCAG 12.80:1 · APCA Lc 75
Best text color: #000000
WCAG 12.80:1 (AAA) · APCA Lc 75
Contrast pairs
Code snippets
CSS
:root {
--bubblegum-heart: #ffb4db;
--bubblegum-heart-rgb: 255 180 219;
--bubblegum-heart-oklch: oklch(0.852 0.099 346.9);
}
.element {
color: var(--bubblegum-heart);
background-color: hsl(329 100% 85%);
border-color: oklch(0.852 0.099 346.9);
}Tailwind CSS v4
@theme {
--color-bubblegum-heart: #ffb4db;
--color-bubblegum-heart-50: #ffeafa;
--color-bubblegum-heart-100: #ffdbed;
--color-bubblegum-heart-200: #f6c4db;
--color-bubblegum-heart-300: #dfa3c0;
--color-bubblegum-heart-400: #ca86aa;
--color-bubblegum-heart-500: #b56a93;
--color-bubblegum-heart-600: #995a7c;
--color-bubblegum-heart-700: #7b4864;
--color-bubblegum-heart-800: #5b344a;
--color-bubblegum-heart-900: #3f2334;
--color-bubblegum-heart-950: #28121f;
}SCSS
$bubblegum-heart: #ffb4db;
$bubblegum-heart-rgb: 255, 180, 219;
$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);
}