Couleur nommée la plus proche · #CB54FF
#CB54FF
Couleur nommée la plus proche: Bubblegum Baby Girl
#CB54FF (rgb(203 84 255), hsl(282 100% 66%), oklch(0.672 0.251 313.7)) est la plus proche de la couleur nommée Bubblegum Baby Girl. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#CB54FF
oklch(0.672 0.251 313.7)
Conversions de couleur
- 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%)
Teintes · Ombres · Tons
Teintes
- D16AFF
- D67DFF
- DC8FFF
- E1A0FF
- E7B0FF
- ECC1FF
- F1D0FF
- F6E0FF
- FAF0FF
Ombres
- B048DE
- 963CBE
- 7D319E
- 652680
- 4D1B63
- 371148
- 22082E
- 0F0216
- 020003
Tons
- C45CF2
- BC63E6
- B569D9
- AE6ECD
- A672C0
- 9F76B4
- 9779A7
- 8F7C9A
- 887E8D
Harmonies de couleurs
Complémentaire +180°
- CB54FF
Bubblegum Baby Girl
- 61AD00
≈ Appetising Asparagus
Analogue -30° +30°
- CB54FF
Bubblegum Baby Girl
- 8B82FF
≈ Periwinkle
- F639BC
≈ Razzle Dazzle Rose
Triadique +120° +240°
- CB54FF
Bubblegum Baby Girl
- C98600
≈ Bubonic Brown
- 00ABAA
≈ Jade Orchid
Complémentaire divisée +150° +210°
- CB54FF
Bubblegum Baby Girl
- A59900
≈ Nuclear Fallout
- 00B17D
≈ Salsify Grass
Tétradique +90° +180° +270°
- CB54FF
Bubblegum Baby Girl
- F36100
≈ Scarlet Ibis
- 61AD00
≈ Appetising Asparagus
- 00A5CE
≈ Charybdis
Contraste et accessibilité
Ag
FailSur blanc
WCAG 3.35:1 · APCA Lc 60
Ag
AASur noir
WCAG 6.25:1 · APCA Lc 42
Meilleure couleur de texte: #000000
WCAG 6.25:1 (AA) · APCA Lc 42
Contrast pairs
Extraits de code
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);
}