En yakın adlandırılmış renk · #CB54FF
#CB54FF
En yakın adlandırılmış renk: Bubblegum Baby Girl
#CB54FF (rgb(203 84 255), hsl(282 100% 66%), oklch(0.672 0.251 313.7)) en çok Bubblegum Baby Girl adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#CB54FF
oklch(0.672 0.251 313.7)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D16AFF
- D67DFF
- DC8FFF
- E1A0FF
- E7B0FF
- ECC1FF
- F1D0FF
- F6E0FF
- FAF0FF
Koyu tonlar
- B048DE
- 963CBE
- 7D319E
- 652680
- 4D1B63
- 371148
- 22082E
- 0F0216
- 020003
Gri tonlar
- C45CF2
- BC63E6
- B569D9
- AE6ECD
- A672C0
- 9F76B4
- 9779A7
- 8F7C9A
- 887E8D
Renk uyumları
Tamamlayıcı +180°
- CB54FF
Bubblegum Baby Girl
- 61AD00
≈ Appetising Asparagus
Analog -30° +30°
- CB54FF
Bubblegum Baby Girl
- 8B82FF
≈ Periwinkle
- F639BC
≈ Razzle Dazzle Rose
Üçlü +120° +240°
- CB54FF
Bubblegum Baby Girl
- C98600
≈ Bubonic Brown
- 00ABAA
≈ Jade Orchid
Bölünmüş tamamlayıcı +150° +210°
- CB54FF
Bubblegum Baby Girl
- A59900
≈ Nuclear Fallout
- 00B17D
≈ Salsify Grass
Dörtlü +90° +180° +270°
- CB54FF
Bubblegum Baby Girl
- F36100
≈ Scarlet Ibis
- 61AD00
≈ Appetising Asparagus
- 00A5CE
≈ Charybdis
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 3.35:1 · APCA Lc 60
Ag
AASiyah üzerinde
WCAG 6.25:1 · APCA Lc 42
En iyi metin rengi: #000000
WCAG 6.25:1 (AA) · APCA Lc 42
Contrast pairs
Kod parçacıkları
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);
}