Color con nombre más cercano · #CB54FF
#CB54FF
Color con nombre más cercano: Bubblegum Baby Girl
#CB54FF (rgb(203 84 255), hsl(282 100% 66%), oklch(0.672 0.251 313.7)) se parece más al color con nombre Bubblegum Baby Girl. Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
#CB54FF
oklch(0.672 0.251 313.7)
Conversiones de color
- HEX
- #cb54ff
- RGB
- rgb(203 84 255)
- HSL
- hsl(282 100% 66%)
- HWB
- hwb(282 33% 0%)
- OKLCH
- oklch(0.672 0.251 313.7)
- OKLab
- oklab(0.672 0.174 -0.182)
- CIE Lab
- lab(57.76 66.33 -64.92)
- LCH
- lch(57.76 92.82 315.6)
- CMYK
- cmyk(20% 67% 0% 0%)
Tintes · Sombras · Tonos
Tintes
- D16AFF
- D67DFF
- DC8FFF
- E1A0FF
- E7B0FF
- ECC1FF
- F1D0FF
- F6E0FF
- FAF0FF
Sombras
- B048DE
- 963CBE
- 7D319E
- 652680
- 4D1B63
- 371148
- 22082E
- 0F0216
- 020003
Tonos
- C45CF2
- BC63E6
- B569D9
- AE6ECD
- A672C0
- 9F76B4
- 9779A7
- 8F7C9A
- 887E8D
Armonías de color
Complementario +180°
- CB54FF
Bubblegum Baby Girl
- 61AD00
≈ Appetising Asparagus
Análogo -30° +30°
- CB54FF
Bubblegum Baby Girl
- 8B82FF
≈ Periwinkle
- F639BC
≈ Razzle Dazzle Rose
Triádico +120° +240°
- CB54FF
Bubblegum Baby Girl
- C98600
≈ Bubonic Brown
- 00ABAA
≈ Jade Orchid
Complementario dividido +150° +210°
- CB54FF
Bubblegum Baby Girl
- A59900
≈ Nuclear Fallout
- 00B17D
≈ Salsify Grass
Tetrádico +90° +180° +270°
- CB54FF
Bubblegum Baby Girl
- F36100
≈ Scarlet Ibis
- 61AD00
≈ Appetising Asparagus
- 00A5CE
≈ Charybdis
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 3.35:1 · APCA Lc 60
Ag
AASobre negro
WCAG 6.25:1 · APCA Lc 42
Mejor color de texto: #000000
WCAG 6.25:1 (AA) · APCA Lc 42
Contrast pairs
Fragmentos de código
CSS
:root {
--bubblegum-baby-girl: #cb54ff;
--bubblegum-baby-girl-rgb: 203 84 255;
--bubblegum-baby-girl-oklch: oklch(0.672 0.251 313.7);
}
.element {
color: var(--bubblegum-baby-girl);
background-color: hsl(282 100% 66%);
border-color: oklch(0.672 0.251 313.7);
}Tailwind CSS v4
@theme {
--color-bubblegum-baby-girl: #cb54ff;
--color-bubblegum-baby-girl-50: #ffe0ff;
--color-bubblegum-baby-girl-100: #ffceff;
--color-bubblegum-baby-girl-200: #fdb1ff;
--color-bubblegum-baby-girl-300: #e889ff;
--color-bubblegum-baby-girl-400: #d263ff;
--color-bubblegum-baby-girl-500: #bf30f7;
--color-bubblegum-baby-girl-600: #a12cd0;
--color-bubblegum-baby-girl-700: #8124a7;
--color-bubblegum-baby-girl-800: #5e197f;
--color-bubblegum-baby-girl-900: #42115a;
--color-bubblegum-baby-girl-950: #2a013d;
}SCSS
$bubblegum-baby-girl: #cb54ff;
$bubblegum-baby-girl-rgb: 203, 84, 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);
}