Cor nomeada · #CC55EE
Bubblegum Baby Girl
Bubblegum Baby Girl é #CC55EE: rgb(204 85 238), hsl(287 82% 63%), oklch(0.664 0.235 318). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Purple mean? → · Bubblegum Baby Girl color name →
#CC55EE
oklch(0.664 0.235 318)
Conversões de cor
- HEX
- #cc55ee
- RGB
- rgb(204 85 238)
- HSL
- hsl(287 82% 63%)
- HWB
- hwb(287 33% 7%)
- OKLCH
- oklch(0.664 0.235 318)
- OKLab
- oklab(0.664 0.175 -0.157)
- CIE Lab
- lab(57.2 63.67 -56.37)
- LCH
- lch(57.2 85.04 318.5)
- CMYK
- cmyk(14% 64% 0% 7%)
Tons claros · Sombras · Tons
Tons claros
- D26AF1
- D87CF3
- DD8EF6
- E39FF8
- E8B0FA
- EDC0FB
- F2D0FD
- F6E0FE
- FBEFFF
Sombras
- B149CF
- 973DB1
- 7E3193
- 652677
- 4E1C5C
- 371142
- 22082A
- 0F0214
- 020003
Tons
- C55DE3
- BD63D8
- B669CD
- AF6EC3
- A772B8
- A075AD
- 9879A2
- 907B97
- 887E8B
Harmonias de cor
Complementar +180°
- CC55EE
Bubblegum Baby Girl
- 47AE00
≈ Early Dew
Análoga -30° +30°
- CC55EE
Bubblegum Baby Girl
- 917AFF
≈ Forgotten Purple
- F23FAC
≈ Major Magenta
Tríade +120° +240°
- CC55EE
Bubblegum Baby Girl
- C18700
≈ Yellow Gold
- 00A8AC
≈ Blue Bolero
Complementar dividida +150° +210°
- CC55EE
Bubblegum Baby Girl
- 9D9900
≈ Papyrus
- 00AD83
≈ Simply Green
Tétrade +90° +180° +270°
- CC55EE
Bubblegum Baby Girl
- E86800
≈ Epicurean Orange
- 47AE00
≈ Early Dew
- 00A2D1
≈ Charybdis
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 3.44:1 · APCA Lc 61
Ag
AASobre preto
WCAG 6.10:1 · APCA Lc 41
Melhor cor de texto: #000000
WCAG 6.10:1 (AA) · APCA Lc 41
Contrast pairs
Trechos de código
CSS
:root {
--bubblegum-baby-girl: #cc55ee;
--bubblegum-baby-girl-rgb: 204 85 238;
--bubblegum-baby-girl-oklch: oklch(0.664 0.235 318);
}
.element {
color: var(--bubblegum-baby-girl);
background-color: hsl(287 82% 63%);
border-color: oklch(0.664 0.235 318);
}Tailwind CSS v4
@theme {
--color-bubblegum-baby-girl: #cc55ee;
--color-bubblegum-baby-girl-50: #ffe0ff;
--color-bubblegum-baby-girl-100: #ffcfff;
--color-bubblegum-baby-girl-200: #ffb2ff;
--color-bubblegum-baby-girl-300: #eb8bff;
--color-bubblegum-baby-girl-400: #d566f6;
--color-bubblegum-baby-girl-500: #c238e7;
--color-bubblegum-baby-girl-600: #a432c3;
--color-bubblegum-baby-girl-700: #84289d;
--color-bubblegum-baby-girl-800: #601c77;
--color-bubblegum-baby-girl-900: #441354;
--color-bubblegum-baby-girl-950: #2b0339;
}SCSS
$bubblegum-baby-girl: #cc55ee;
$bubblegum-baby-girl-rgb: 204, 85, 238;
$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);
}