命名颜色 · #C8D0CA
Infusion
Infusion 即 #C8D0CA：rgb(200 208 202)、hsl(135 8% 80%)、oklch(0.85 0.012 153.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Infusion color name →
#C8D0CA
oklch(0.85 0.012 153.6)
颜色转换
- HEX
- #c8d0ca
- RGB
- rgb(200 208 202)
- HSL
- hsl(135 8% 80%)
- HWB
- hwb(135 78% 18%)
- OKLCH
- oklch(0.85 0.012 153.6)
- OKLab
- oklab(0.85 -0.011 0.005)
- CIE Lab
- lab(82.73 -3.65 1.99)
- LCH
- lch(82.73 4.16 151.4)
- CMYK
- cmyk(4% 0% 3% 18%)
浅色调 · 深色调 · 灰色调
浅色调
- CDD5CF
- D3D9D4
- D8DEDA
- DEE3DF
- E3E7E4
- E9ECEA
- EEF1EF
- F4F5F4
- F9FAFA
深色调
- AEB5AF
- 949A95
- 7B807C
- 636764
- 4C4F4D
- 363937
- 212322
- 0F100F
- 020202
灰色调
- C1C8C2
- B9BFBB
- B2B7B3
- ABAFAC
- A3A7A4
- 9C9F9D
- 959796
- 8E8F8E
- 878887
配色和谐
互补色 +180°
- C8D0CA
Infusion
- D3CBD1
≈ Light Stately Frills
类似色 -30° +30°
- C8D0CA
Infusion
- CCCFC7
≈ Lattice
- C6D0CE
≈ Light French Grey
三角配色 +120° +240°
- C8D0CA
Infusion
- CBCDD6
≈ Ghostly Grey
- D5CBC9
≈ Orchid Blush
分裂互补色 +150° +210°
- C8D0CA
Infusion
- CFCCD4
≈ Ghostly Grey
- D5CBCD
≈ Light Pale Pearl
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 1.57:1 · APCA Lc 26
Ag
AAA黑底
WCAG 13.33:1 · APCA Lc 77
最佳文字颜色: #000000
WCAG 13.33:1 (AAA) · APCA Lc 77
Contrast pairs
代码片段
CSS
:root {
--infusion: #c8d0ca;
--infusion-rgb: 200 208 202;
--infusion-oklch: oklch(0.85 0.012 153.6);
}
.element {
color: var(--infusion);
background-color: hsl(135 8% 80%);
border-color: oklch(0.85 0.012 153.6);
}Tailwind CSS v4
@theme {
--color-infusion: #c8d0ca;
--color-infusion-50: #f2f6f4;
--color-infusion-100: #e5e9e6;
--color-infusion-200: #d0d6d2;
--color-infusion-300: #b3b9b5;
--color-infusion-400: #99a19b;
--color-infusion-500: #808982;
--color-infusion-600: #6d746e;
--color-infusion-700: #575c58;
--color-infusion-800: #3f4440;
--color-infusion-900: #2c2f2c;
--color-infusion-950: #191b19;
}SCSS
$infusion: #c8d0ca;
$infusion-rgb: 200, 208, 202;
$infusion-light: mix(#fff, $infusion, 20%);
$infusion-dark: mix(#000, $infusion, 20%);
.element {
color: $infusion;
box-shadow: 0 0 0 2px rgba($infusion, 0.35);
}