Nearest named color · #D946EF
#D946EF
Nearest named color: Bubblegum Baby Girl
#D946EF (rgb(217 70 239), hsl(292 84% 61%), oklch(0.667 0.259 322.1)) is closest to the named color Bubblegum Baby Girl. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#D946EF
oklch(0.667 0.259 322.1)
Color conversions
- HEX
- #d946ef
- RGB
- rgb(217 70 239)
- HSL
- hsl(292 84% 61%)
- HWB
- hwb(292 27% 6%)
- OKLCH
- oklch(0.667 0.259 322.1)
- OKLab
- oklab(0.667 0.205 -0.159)
- CIE Lab
- lab(57.14 72.49 -56.9)
- LCH
- lch(57.14 92.15 321.9)
- CMYK
- cmyk(9% 71% 0% 6%)
Tints · Shades · Tones
Tints
- DE5FF2
- E374F4
- E888F6
- EC9AF8
- F0ACFA
- F4BDFC
- F7CEFD
- FADEFE
- FDEFFF
Shades
- BC3CD0
- A132B1
- 862894
- 6C1E78
- 53155C
- 3B0D42
- 25052A
- 110214
- 020003
Tones
- D151E4
- C85AD9
- C062CE
- B768C3
- AE6EB8
- A672AD
- 9D77A2
- 937A97
- 8A7D8C
Color harmonies
Complementary +180°
- D946EF
Bubblegum Baby Girl
- 10B300
≈ Pikkoro Green
Analogous -30° +30°
- D946EF
Bubblegum Baby Girl
- 9A77FF
≈ Forgotten Purple
- FF26A4
≈ Persian Rose
Triadic +120° +240°
- D946EF
Bubblegum Baby Girl
- BE8A00
≈ Kenyan Sand
- 00A8B2
≈ Exotic Sea
Split-complementary +150° +210°
- D946EF
Bubblegum Baby Girl
- 979C00
≈ Papyrus
- 00AD8B
≈ Arcadia
Tetradic +90° +180° +270°
- D946EF
Bubblegum Baby Girl
- E36F00
≈ Accent Orange
- 10B300
≈ Pikkoro Green
- 00A1D9
≈ Vanadyl Blue
Contrast & accessibility
Ag
FailOn white
WCAG 3.45:1 · APCA Lc 61
Ag
AAOn black
WCAG 6.07:1 · APCA Lc 41
Best text color: #000000
WCAG 6.07:1 (AA) · APCA Lc 41
Contrast pairs
Code snippets
CSS
:root {
--bubblegum-baby-girl: #d946ef;
--bubblegum-baby-girl-rgb: 217 70 239;
--bubblegum-baby-girl-oklch: oklch(0.667 0.259 322.1);
}
.element {
color: var(--bubblegum-baby-girl);
background-color: hsl(292 84% 61%);
border-color: oklch(0.667 0.259 322.1);
}Tailwind CSS v4
@theme {
--color-bubblegum-baby-girl: #d946ef;
--color-bubblegum-baby-girl-50: #ffdcff;
--color-bubblegum-baby-girl-100: #ffcaff;
--color-bubblegum-baby-girl-200: #ffacff;
--color-bubblegum-baby-girl-300: #f682ff;
--color-bubblegum-baby-girl-400: #e159f6;
--color-bubblegum-baby-girl-500: #cf17e7;
--color-bubblegum-baby-girl-600: #af1bc3;
--color-bubblegum-baby-girl-700: #8c179d;
--color-bubblegum-baby-girl-800: #670f78;
--color-bubblegum-baby-girl-900: #480a54;
--color-bubblegum-baby-girl-950: #2f0039;
}SCSS
$bubblegum-baby-girl: #d946ef;
$bubblegum-baby-girl-rgb: 217, 70, 239;
$bubblegum-baby-girl-light: mix(#fff, $bubblegum-baby-girl, 20%);
$bubblegum-baby-girl-dark: mix(#000, $bubblegum-baby-girl, 20%);
.element {
color: $bubblegum-baby-girl;
box-shadow: 0 0 0 2px rgba($bubblegum-baby-girl, 0.35);
}