Named color · #FF85FF
Bubblegum
Bubblegum is #FF85FF: rgb(255 133 255), hsl(300 100% 76%), oklch(0.794 0.207 327.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Bubblegum color name →
#FF85FF
oklch(0.794 0.207 327.3)
Color conversions
- HEX
- #ff85ff
- RGB
- rgb(255 133 255)
- HSL
- hsl(300 100% 76%)
- HWB
- hwb(300 52% 0%)
- OKLCH
- oklch(0.794 0.207 327.3)
- OKLab
- oklab(0.794 0.174 -0.112)
- CIE Lab
- lab(72.97 59.23 -40.4)
- LCH
- lch(72.97 71.69 325.7)
- CMYK
- cmyk(0% 48% 0% 0%)
Tints · Shades · Tones
Tints
- FF93FF
- FFA0FF
- FFADFF
- FFB9FF
- FFC5FF
- FFD1FF
- FFDDFF
- FFE8FF
- FFF4FF
Shades
- DE73DE
- BE61BE
- 9E509E
- 804080
- 633063
- 482148
- 2E132E
- 160616
- 030103
Tones
- F286F2
- E687E5
- D987D8
- CC87CB
- C086BF
- B386B2
- A785A5
- 9A8399
- 8D828C
Color harmonies
Complementary +180°
- FF85FF
Bubblegum
- 42DE66
≈ Hello Spring
Analogous -30° +30°
- FF85FF
Bubblegum
- C4ABFF
≈ Purple Hepatica
- FF96BC
≈ Saira Red
Triadic +120° +240°
- FF85FF
Bubblegum
- E8B300
≈ Trumpet Gold
- 00D3E8
≈ Aztec Turquoise
Split-complementary +150° +210°
- FF85FF
Bubblegum
- B4CA00
≈ Chartreuse Spark
- 00DABA
≈ Channel Marker Green
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.08:1 · APCA Lc 40
Ag
AAAOn black
WCAG 10.05:1 · APCA Lc 62
Best text color: #000000
WCAG 10.05:1 (AAA) · APCA Lc 62
Contrast pairs
Code snippets
CSS
:root {
--bubblegum: #ff85ff;
--bubblegum-rgb: 255 133 255;
--bubblegum-oklch: oklch(0.794 0.207 327.3);
}
.element {
color: var(--bubblegum);
background-color: hsl(300 100% 76%);
border-color: oklch(0.794 0.207 327.3);
}Tailwind CSS v4
@theme {
--color-bubblegum: #ff85ff;
--color-bubblegum-50: #ffe1ff;
--color-bubblegum-100: #ffcfff;
--color-bubblegum-200: #ffb4ff;
--color-bubblegum-300: #f08eea;
--color-bubblegum-400: #dc6bdc;
--color-bubblegum-500: #c942cb;
--color-bubblegum-600: #aa3aab;
--color-bubblegum-700: #882e89;
--color-bubblegum-800: #642068;
--color-bubblegum-900: #461649;
--color-bubblegum-950: #2d0630;
}SCSS
$bubblegum: #ff85ff;
$bubblegum-rgb: 255, 133, 255;
$bubblegum-light: mix(#fff, $bubblegum, 20%);
$bubblegum-dark: mix(#000, $bubblegum, 20%);
.element {
color: $bubblegum;
box-shadow: 0 0 0 2px rgba($bubblegum, 0.35);
}