最も近い色名 · #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);
}