色名 · #8FCBDC
Baby Motive
Baby Motiveは#8FCBDC：rgb(143 203 220)、hsl(193 52% 71%)、oklch(0.807 0.066 217.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Cyan mean? → · Baby Motive color name →
#8FCBDC
oklch(0.807 0.066 217.3)
カラー変換
- HEX
- #8fcbdc
- RGB
- rgb(143 203 220)
- HSL
- hsl(193 52% 71%)
- HWB
- hwb(193 56% 14%)
- OKLCH
- oklch(0.807 0.066 217.3)
- OKLab
- oklab(0.807 -0.052 -0.04)
- CIE Lab
- lab(78.03 -16.85 -14.98)
- LCH
- lch(78.03 22.54 221.6)
- CMYK
- cmyk(35% 8% 0% 14%)
ティント · シェード · トーン
ティント
- 9BD0E0
- A6D5E3
- B2DBE7
- BDE0EA
- C8E5EE
- D3EAF1
- DEEFF5
- E9F5F8
- F4FAFC
シェード
- 7CB0BF
- 6996A3
- 577D88
- 45656E
- 344D54
- 24373C
- 152226
- 070F11
- 010202
トーン
- 8EC3D2
- 8DBCC9
- 8CB4C0
- 8BACB6
- 89A5AD
- 889DA4
- 86969B
- 848F92
- 828789
カラーハーモニー
補色 +180°
- 8FCBDC
Baby Motive
- E7B2A2
≈ Shilo
類似色 -30° +30°
- 8FCBDC
Baby Motive
- 8ECEC7
≈ Tropical Holiday
- 9EC5E9
≈ Pale Cerulean
トライアド +120° +240°
- 8FCBDC
Baby Motive
- DDB0CF
≈ Bff
- CBC190
≈ Rainforest Fern
スプリットコンプリメンタリー +150° +210°
- 8FCBDC
Baby Motive
- E6AFB8
≈ Amazon River Dolphin
- DDB893
≈ Friar Tuck
テトラード +90° +180° +270°
- 8FCBDC
Baby Motive
- CBB5E2
≈ Viking Diva
- E7B2A2
≈ Shilo
- B4C89B
≈ Wasabi Peanut
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.78:1 · APCA Lc 33
Ag
AAA黒の上
WCAG 11.74:1 · APCA Lc 70
最適な文字色: #000000
WCAG 11.74:1 (AAA) · APCA Lc 70
Contrast pairs
コードスニペット
CSS
:root {
--baby-motive: #8fcbdc;
--baby-motive-rgb: 143 203 220;
--baby-motive-oklch: oklch(0.807 0.066 217.3);
}
.element {
color: var(--baby-motive);
background-color: hsl(193 52% 71%);
border-color: oklch(0.807 0.066 217.3);
}Tailwind CSS v4
@theme {
--color-baby-motive: #8fcbdc;
--color-baby-motive-50: #e1faff;
--color-baby-motive-100: #d1eef7;
--color-baby-motive-200: #b6dce8;
--color-baby-motive-300: #92c0cf;
--color-baby-motive-400: #71a8b8;
--color-baby-motive-500: #4f91a3;
--color-baby-motive-600: #447b8a;
--color-baby-motive-700: #36626e;
--color-baby-motive-800: #254851;
--color-baby-motive-900: #193238;
--color-baby-motive-950: #091e23;
}SCSS
$baby-motive: #8fcbdc;
$baby-motive-rgb: 143, 203, 220;
$baby-motive-light: mix(#fff, $baby-motive, 20%);
$baby-motive-dark: mix(#000, $baby-motive, 20%);
.element {
color: $baby-motive;
box-shadow: 0 0 0 2px rgba($baby-motive, 0.35);
}