Màu có tên gần nhất · #CB54FF
#CB54FF
Màu có tên gần nhất: Bubblegum Baby Girl
#CB54FF (rgb(203 84 255), hsl(282 100% 66%), oklch(0.672 0.251 313.7)) gần nhất với màu có tên Bubblegum Baby Girl. Xem sắc nhạt, sắc đậm, hòa sắc, tương phản WCAG và APCA, cùng mã CSS, Tailwind v4 và SCSS.
#CB54FF
oklch(0.672 0.251 313.7)
Chuyển đổi màu
- 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%)
Sắc nhạt · Sắc đậm · Sắc xám
Sắc nhạt
- D16AFF
- D67DFF
- DC8FFF
- E1A0FF
- E7B0FF
- ECC1FF
- F1D0FF
- F6E0FF
- FAF0FF
Sắc đậm
- B048DE
- 963CBE
- 7D319E
- 652680
- 4D1B63
- 371148
- 22082E
- 0F0216
- 020003
Sắc xám
- C45CF2
- BC63E6
- B569D9
- AE6ECD
- A672C0
- 9F76B4
- 9779A7
- 8F7C9A
- 887E8D
Hòa sắc
Bổ túc +180°
- CB54FF
Bubblegum Baby Girl
- 61AD00
≈ Appetising Asparagus
Tương đồng -30° +30°
- CB54FF
Bubblegum Baby Girl
- 8B82FF
≈ Periwinkle
- F639BC
≈ Razzle Dazzle Rose
Bộ ba +120° +240°
- CB54FF
Bubblegum Baby Girl
- C98600
≈ Bubonic Brown
- 00ABAA
≈ Jade Orchid
Bổ túc chia +150° +210°
- CB54FF
Bubblegum Baby Girl
- A59900
≈ Nuclear Fallout
- 00B17D
≈ Salsify Grass
Bộ bốn +90° +180° +270°
- CB54FF
Bubblegum Baby Girl
- F36100
≈ Scarlet Ibis
- 61AD00
≈ Appetising Asparagus
- 00A5CE
≈ Charybdis
Tương phản và khả năng tiếp cận
Ag
FailTrên nền trắng
WCAG 3.35:1 · APCA Lc 60
Ag
AATrên nền đen
WCAG 6.25:1 · APCA Lc 42
Màu chữ tốt nhất: #000000
WCAG 6.25:1 (AA) · APCA Lc 42
Contrast pairs
Đoạn mã
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);
}