色名 · #FFBADF

Bubblegum Heart

Bubblegum Heartは#FFBADF：rgb(255 186 223)、hsl(328 100% 86%)、oklch(0.863 0.092 345.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Pink mean? → · Bubblegum Heart color name →

#FFBADF

oklch(0.863 0.092 345.8)

カラー変換

HEX: #ffbadf
RGB: rgb(255 186 223)
HSL: hsl(328 100% 86%)
HWB: hwb(328 73% 0%)
OKLCH: oklch(0.863 0.092 345.8)
OKLab: oklab(0.863 0.089 -0.023)
CIE Lab: lab(82.87 29.68 -8.23)
LCH: lch(82.87 30.8 344.5)
CMYK: cmyk(0% 27% 13% 0%)

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

ティント

FFC1E2
FFC8E5
FFCFE9
FFD6EC
FFDDEF
FFE4F2
FFEAF5
FFF1F9
FFF8FC

シェード

DEA1C2
BE89A5
9E728A
805C6F
634656
48323D
2E1E27
160D12
030202

トーン

F2B4D5
E5AECB
D8A9C2
CBA3B8
BF9DAE
B297A5
A5919C
998C92
8C8689

カラーハーモニー

補色 +180°

FFBADF
Bubblegum Heart
96E6C4
≈ Green Gum

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 1.57:1 · APCA Lc 26

Fail

黒の上

WCAG 13.34:1 · APCA Lc 77

AAA

最適な文字色: #000000

WCAG 13.34:1 (AAA) · APCA Lc 77

Contrast pairs

コードスニペット

CSS

:root {
  --bubblegum-heart: #ffbadf;
  --bubblegum-heart-rgb: 255 186 223;
  --bubblegum-heart-oklch: oklch(0.863 0.092 345.8);
}

.element {
  color: var(--bubblegum-heart);
  background-color: hsl(328 100% 86%);
  border-color: oklch(0.863 0.092 345.8);
}

Tailwind CSS v4

@theme {
  --color-bubblegum-heart: #ffbadf;
  --color-bubblegum-heart-50: #ffebfa;
  --color-bubblegum-heart-100: #ffdced;
  --color-bubblegum-heart-200: #f3c5db;
  --color-bubblegum-heart-300: #dca5c0;
  --color-bubblegum-heart-400: #c688aa;
  --color-bubblegum-heart-500: #b26c93;
  --color-bubblegum-heart-600: #965c7d;
  --color-bubblegum-heart-700: #794964;
  --color-bubblegum-heart-800: #59354a;
  --color-bubblegum-heart-900: #3e2434;
  --color-bubblegum-heart-950: #27131f;
}

SCSS

$bubblegum-heart: #ffbadf;
$bubblegum-heart-rgb: 255, 186, 223;
$bubblegum-heart-light: mix(#fff, $bubblegum-heart, 20%);
$bubblegum-heart-dark: mix(#000, $bubblegum-heart, 20%);

.element {
  color: $bubblegum-heart;
  box-shadow: 0 0 0 2px rgba($bubblegum-heart, 0.35);
}

近い色名

Palettes with similar colors

ツールで開く

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