最接近的命名颜色 · #BE60FF
#BE60FF
最接近的命名颜色: Bubblegum Baby Girl
#BE60FF（rgb(190 96 255)、hsl(275 100% 69%)、oklch(0.67 0.232 308.6)）最接近命名颜色 Bubblegum Baby Girl。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#BE60FF
oklch(0.67 0.232 308.6)
颜色转换
- 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%)
浅色调 · 深色调 · 灰色调
浅色调
- C573FF
- CB84FF
- D295FF
- D8A5FF
- DFB4FF
- E5C3FF
- ECD3FF
- F2E1FF
- F9F0FF
深色调
- A552DE
- 8C45BE
- 75389E
- 5E2C80
- 482063
- 331548
- 1F0A2E
- 0D0316
- 020003
灰色调
- B866F2
- B16BE6
- AB6FD9
- A573CD
- 9F76C0
- 9979B4
- 927BA7
- 8C7D9A
- 867F8D
配色和谐
互补色 +180°
- BE60FF
Bubblegum Baby Girl
- 74A800
≈ Green Envy
类似色 -30° +30°
- BE60FF
Bubblegum Baby Girl
- 8085FF
≈ Blue Party Parrot
- E949C4
≈ Purplish Pink
三角配色 +120° +240°
- BE60FF
Bubblegum Baby Girl
- CF8100
≈ Copious Caramel
- 00ACA3
≈ Teal Me No Lies
分裂互补色 +150° +210°
- BE60FF
Bubblegum Baby Girl
- AB9500
≈ Vegan Villain
- 00B171
≈ Jade Powder
四角配色 +90° +180° +270°
- BE60FF
Bubblegum Baby Girl
- FD5300
≈ Mystic Red
- 74A800
≈ Green Envy
- 00A6C7
≈ Cyan Blue
对比度与无障碍
Ag
Fail白底
WCAG 3.32:1 · APCA Lc 60
Ag
AA黑底
WCAG 6.30:1 · APCA Lc 42
最佳文字颜色: #000000
WCAG 6.30:1 (AA) · APCA Lc 42
Contrast pairs
代码片段
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);
}