Cor nomeada mais próxima · #BE60FF
#BE60FF
Cor nomeada mais próxima: Bubblegum Baby Girl
#BE60FF (rgb(190 96 255), hsl(275 100% 69%), oklch(0.67 0.232 308.6)) é mais próxima da cor nomeada Bubblegum Baby Girl. Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
#BE60FF
oklch(0.67 0.232 308.6)
Conversões de cor
- HEX
- #be60ff
- RGB
- rgb(190 96 255)
- HSL
- hsl(275 100% 69%)
- HWB
- hwb(275 38% 0%)
- OKLCH
- oklch(0.67 0.232 308.6)
- OKLab
- oklab(0.67 0.145 -0.181)
- CIE Lab
- lab(57.95 58.06 -64.74)
- LCH
- lch(57.95 86.96 311.9)
- CMYK
- cmyk(25% 62% 0% 0%)
Tons claros · Sombras · Tons
Tons claros
- C573FF
- CB84FF
- D295FF
- D8A5FF
- DFB4FF
- E5C3FF
- ECD3FF
- F2E1FF
- F9F0FF
Sombras
- A552DE
- 8C45BE
- 75389E
- 5E2C80
- 482063
- 331548
- 1F0A2E
- 0D0316
- 020003
Tons
- B866F2
- B16BE6
- AB6FD9
- A573CD
- 9F76C0
- 9979B4
- 927BA7
- 8C7D9A
- 867F8D
Harmonias de cor
Complementar +180°
- BE60FF
Bubblegum Baby Girl
- 74A800
≈ Green Envy
Análoga -30° +30°
- BE60FF
Bubblegum Baby Girl
- 8085FF
≈ Blue Party Parrot
- E949C4
≈ Purplish Pink
Tríade +120° +240°
- BE60FF
Bubblegum Baby Girl
- CF8100
≈ Copious Caramel
- 00ACA3
≈ Teal Me No Lies
Complementar dividida +150° +210°
- BE60FF
Bubblegum Baby Girl
- AB9500
≈ Vegan Villain
- 00B171
≈ Jade Powder
Tétrade +90° +180° +270°
- BE60FF
Bubblegum Baby Girl
- FD5300
≈ Mystic Red
- 74A800
≈ Green Envy
- 00A6C7
≈ Cyan Blue
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 3.32:1 · APCA Lc 60
Ag
AASobre preto
WCAG 6.30:1 · APCA Lc 42
Melhor cor de texto: #000000
WCAG 6.30:1 (AA) · APCA Lc 42
Contrast pairs
Trechos de código
CSS
:root {
--bubblegum-baby-girl: #be60ff;
--bubblegum-baby-girl-rgb: 190 96 255;
--bubblegum-baby-girl-oklch: oklch(0.67 0.232 308.6);
}
.element {
color: var(--bubblegum-baby-girl);
background-color: hsl(275 100% 69%);
border-color: oklch(0.67 0.232 308.6);
}Tailwind CSS v4
@theme {
--color-bubblegum-baby-girl: #be60ff;
--color-bubblegum-baby-girl-50: #ffe3ff;
--color-bubblegum-baby-girl-100: #ffd2ff;
--color-bubblegum-baby-girl-200: #f3b7ff;
--color-bubblegum-baby-girl-300: #dd91ff;
--color-bubblegum-baby-girl-400: #c66eff;
--color-bubblegum-baby-girl-500: #b244f7;
--color-bubblegum-baby-girl-600: #963bd1;
--color-bubblegum-baby-girl-700: #7930a8;
--color-bubblegum-baby-girl-800: #57227f;
--color-bubblegum-baby-girl-900: #3d175a;
--color-bubblegum-baby-girl-950: #27063d;
}SCSS
$bubblegum-baby-girl: #be60ff;
$bubblegum-baby-girl-rgb: 190, 96, 255;
$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);
}