命名颜色 · #BCC3C7
Metallic
Metallic 即 #BCC3C7：rgb(188 195 199)、hsl(202 9% 76%)、oklch(0.813 0.01 232.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Metallic color name →
#BCC3C7
oklch(0.813 0.01 232.4)
颜色转换
- HEX
- #bcc3c7
- RGB
- rgb(188 195 199)
- HSL
- hsl(202 9% 76%)
- HWB
- hwb(202 74% 22%)
- OKLCH
- oklch(0.813 0.01 232.4)
- OKLab
- oklab(0.813 -0.006 -0.008)
- CIE Lab
- lab(78.33 -1.93 -2.9)
- LCH
- lch(78.33 3.48 236.4)
- CMYK
- cmyk(6% 2% 0% 22%)
浅色调 · 深色调 · 灰色调
浅色调
- C3C9CC
- C9CFD2
- D0D5D8
- D6DBDD
- DDE1E3
- E4E7E8
- EBEDEE
- F1F3F4
- F8F9F9
深色调
- A3A9AD
- 8B9093
- 73787A
- 5D6062
- 474A4C
- 323436
- 1F2021
- 0D0E0E
- 020202
灰色调
- B6BCC0
- B0B5B8
- AAAEB1
- A4A8AA
- 9DA1A3
- 989A9C
- 929495
- 8C8D8E
- 868687
配色和谐
互补色 +180°
- BCC3C7
Metallic
- C7C0BC
≈ Modest Silver
类似色 -30° +30°
- BCC3C7
Metallic
- BBC4C4
≈ Silver Whiskers
- BEC2C8
≈ Metallic
三角配色 +120° +240°
- BCC3C7
Metallic
- C7BFC2
≈ Easter Rabbit
- C2C2BC
≈ Gull Feather
分裂互补色 +150° +210°
- BCC3C7
Metallic
- C8BFBF
≈ Nantucket Mist
- C5C1BB
≈ San Francisco Fog
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 1.78:1 · APCA Lc 33
Ag
AAA黑底
WCAG 11.76:1 · APCA Lc 70
最佳文字颜色: #000000
WCAG 11.76:1 (AAA) · APCA Lc 70
Contrast pairs
代码片段
CSS
:root {
--metallic: #bcc3c7;
--metallic-rgb: 188 195 199;
--metallic-oklch: oklch(0.813 0.01 232.4);
}
.element {
color: var(--metallic);
background-color: hsl(202 9% 76%);
border-color: oklch(0.813 0.01 232.4);
}Tailwind CSS v4
@theme {
--color-metallic: #bcc3c7;
--color-metallic-50: #f3f6f7;
--color-metallic-100: #e5e8eb;
--color-metallic-200: #d0d5d8;
--color-metallic-300: #b3b8bc;
--color-metallic-400: #999fa3;
--color-metallic-500: #80878b;
--color-metallic-600: #6d7376;
--color-metallic-700: #575c5e;
--color-metallic-800: #3f4345;
--color-metallic-900: #2b2e30;
--color-metallic-950: #191b1c;
}SCSS
$metallic: #bcc3c7;
$metallic-rgb: 188, 195, 199;
$metallic-light: mix(#fff, $metallic, 20%);
$metallic-dark: mix(#000, $metallic, 20%);
.element {
color: $metallic;
box-shadow: 0 0 0 2px rgba($metallic, 0.35);
}