色名 · #CC55EE

Bubblegum Baby Girl

Bubblegum Baby Girlは#CC55EE：rgb(204 85 238)、hsl(287 82% 63%)、oklch(0.664 0.235 318)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Purple mean? → · Bubblegum Baby Girl color name →

#CC55EE

oklch(0.664 0.235 318)

カラー変換

HEX: #cc55ee
RGB: rgb(204 85 238)
HSL: hsl(287 82% 63%)
HWB: hwb(287 33% 7%)
OKLCH: oklch(0.664 0.235 318)
OKLab: oklab(0.664 0.175 -0.157)
CIE Lab: lab(57.2 63.67 -56.37)
LCH: lch(57.2 85.04 318.5)
CMYK: cmyk(14% 64% 0% 7%)

ティント · シェード · トーン

ティント

D26AF1
D87CF3
DD8EF6
E39FF8
E8B0FA
EDC0FB
F2D0FD
F6E0FE
FBEFFF

シェード

B149CF
973DB1
7E3193
652677
4E1C5C
371142
22082A
0F0214
020003

トーン

C55DE3
BD63D8
B669CD
AF6EC3
A772B8
A075AD
9879A2
907B97
887E8B

カラーハーモニー

補色 +180°

CC55EE
Bubblegum Baby Girl
47AE00
≈ Early Dew

類似色 -30° +30°

トライアド +120° +240°

スプリットコンプリメンタリー +150° +210°

CC55EE
Bubblegum Baby Girl
9D9900
≈ Papyrus
00AD83
≈ Simply Green

テトラード +90° +180° +270°

コントラストとアクセシビリティ

白の上

WCAG 3.44:1 · APCA Lc 61

Fail

黒の上

WCAG 6.10:1 · APCA Lc 41

最適な文字色: #000000

WCAG 6.10:1 (AA) · APCA Lc 41

Contrast pairs

コードスニペット

CSS

:root {
  --bubblegum-baby-girl: #cc55ee;
  --bubblegum-baby-girl-rgb: 204 85 238;
  --bubblegum-baby-girl-oklch: oklch(0.664 0.235 318);
}

.element {
  color: var(--bubblegum-baby-girl);
  background-color: hsl(287 82% 63%);
  border-color: oklch(0.664 0.235 318);
}

Tailwind CSS v4

@theme {
  --color-bubblegum-baby-girl: #cc55ee;
  --color-bubblegum-baby-girl-50: #ffe0ff;
  --color-bubblegum-baby-girl-100: #ffcfff;
  --color-bubblegum-baby-girl-200: #ffb2ff;
  --color-bubblegum-baby-girl-300: #eb8bff;
  --color-bubblegum-baby-girl-400: #d566f6;
  --color-bubblegum-baby-girl-500: #c238e7;
  --color-bubblegum-baby-girl-600: #a432c3;
  --color-bubblegum-baby-girl-700: #84289d;
  --color-bubblegum-baby-girl-800: #601c77;
  --color-bubblegum-baby-girl-900: #441354;
  --color-bubblegum-baby-girl-950: #2b0339;
}

SCSS

$bubblegum-baby-girl: #cc55ee;
$bubblegum-baby-girl-rgb: 204, 85, 238;
$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);
}

近い色名

Palettes with similar colors

ツールで開く

ピッカーペアコントラストチェッカー Studio JSON API