命名颜色 · #C3CED8
Illusion Blue
Illusion Blue 即 #C3CED8：rgb(195 206 216)、hsl(209 21% 81%)、oklch(0.846 0.018 245.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Illusion Blue color name →
#C3CED8
oklch(0.846 0.018 245.4)
颜色转换
- HEX
- #c3ced8
- RGB
- rgb(195 206 216)
- HSL
- hsl(209 21% 81%)
- HWB
- hwb(209 76% 15%)
- OKLCH
- oklch(0.846 0.018 245.4)
- OKLab
- oklab(0.846 -0.008 -0.017)
- CIE Lab
- lab(82.14 -2.42 -6.34)
- LCH
- lch(82.14 6.78 249.1)
- CMYK
- cmyk(10% 5% 0% 15%)
浅色调 · 深色调 · 灰色调
浅色调
- C9D3DC
- CFD8E0
- D5DDE4
- DBE1E8
- E1E6EB
- E7EBEF
- EDF0F3
- F3F5F7
- F9FAFB
深色调
- A9B3BC
- 9098A0
- 787F85
- 60666B
- 4A4E53
- 34383B
- 202325
- 0E0F11
- 020202
灰色调
- BCC6CF
- B5BEC6
- AEB6BD
- A8AEB4
- A1A6AB
- 9A9EA2
- 94979A
- 8D8F91
- 868788
配色和谐
互补色 +180°
- C3CED8
Illusion Blue
- D5CAC0
≈ Ashen Tan
类似色 -30° +30°
- C3CED8
Illusion Blue
- C0D0D4
≈ Alice White
- C9CCD9
≈ Winter’s Fury
三角配色 +120° +240°
- C3CED8
Illusion Blue
- D8C8CB
≈ Light Pink Polar
- C9CFC2
≈ Harp
分裂互补色 +150° +210°
- C3CED8
Illusion Blue
- D8C9C4
≈ Goodbye Kiss
- D0CDBF
≈ Sedate Grey
四角配色 +90° +180° +270°
- C3CED8
Illusion Blue
- D5C8D1
≈ Rosy Lavender
- D5CAC0
≈ Ashen Tan
- C4D0C7
≈ Fountain Foam
对比度与无障碍
Ag
Fail白底
WCAG 1.59:1 · APCA Lc 27
Ag
AAA黑底
WCAG 13.14:1 · APCA Lc 76
最佳文字颜色: #000000
WCAG 13.14:1 (AAA) · APCA Lc 76
Contrast pairs
代码片段
CSS
:root {
--illusion-blue: #c3ced8;
--illusion-blue-rgb: 195 206 216;
--illusion-blue-oklch: oklch(0.846 0.018 245.4);
}
.element {
color: var(--illusion-blue);
background-color: hsl(209 21% 81%);
border-color: oklch(0.846 0.018 245.4);
}Tailwind CSS v4
@theme {
--color-illusion-blue: #c3ced8;
--color-illusion-blue-50: #f1f6fa;
--color-illusion-blue-100: #e3e9ee;
--color-illusion-blue-200: #ced5dc;
--color-illusion-blue-300: #b0b8c1;
--color-illusion-blue-400: #96a0a9;
--color-illusion-blue-500: #7c8892;
--color-illusion-blue-600: #69737b;
--color-illusion-blue-700: #545c63;
--color-illusion-blue-800: #3d4348;
--color-illusion-blue-900: #2a2e32;
--color-illusion-blue-950: #181b1e;
}SCSS
$illusion-blue: #c3ced8;
$illusion-blue-rgb: 195, 206, 216;
$illusion-blue-light: mix(#fff, $illusion-blue, 20%);
$illusion-blue-dark: mix(#000, $illusion-blue, 20%);
.element {
color: $illusion-blue;
box-shadow: 0 0 0 2px rgba($illusion-blue, 0.35);
}