Couleur nommée · #FF85FF
Bubblegum
Bubblegum correspond à #FF85FF : rgb(255 133 255), hsl(300 100% 76%), oklch(0.794 0.207 327.3). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Purple mean? → · Bubblegum color name →
#FF85FF
oklch(0.794 0.207 327.3)
Conversions de couleur
- 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%)
Teintes · Ombres · Tons
Teintes
- FF93FF
- FFA0FF
- FFADFF
- FFB9FF
- FFC5FF
- FFD1FF
- FFDDFF
- FFE8FF
- FFF4FF
Ombres
- DE73DE
- BE61BE
- 9E509E
- 804080
- 633063
- 482148
- 2E132E
- 160616
- 030103
Tons
- F286F2
- E687E5
- D987D8
- CC87CB
- C086BF
- B386B2
- A785A5
- 9A8399
- 8D828C
Harmonies de couleurs
Complémentaire +180°
- FF85FF
Bubblegum
- 42DE66
≈ Hello Spring
Analogue -30° +30°
- FF85FF
Bubblegum
- C4ABFF
≈ Purple Hepatica
- FF96BC
≈ Saira Red
Triadique +120° +240°
- FF85FF
Bubblegum
- E8B300
≈ Trumpet Gold
- 00D3E8
≈ Aztec Turquoise
Complémentaire divisée +150° +210°
- FF85FF
Bubblegum
- B4CA00
≈ Chartreuse Spark
- 00DABA
≈ Channel Marker Green
Tétradique +90° +180° +270°
Contraste et accessibilité
Ag
FailSur blanc
WCAG 2.08:1 · APCA Lc 40
Ag
AAASur noir
WCAG 10.05:1 · APCA Lc 62
Meilleure couleur de texte: #000000
WCAG 10.05:1 (AAA) · APCA Lc 62
Contrast pairs
Extraits de code
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);
}