命名颜色 · #C5C3B4
Comforting Grey
Comforting Grey 即 #C5C3B4：rgb(197 195 180)、hsl(53 13% 74%)、oklch(0.815 0.021 100.7)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Comforting Grey color name →
#C5C3B4
oklch(0.815 0.021 100.7)
颜色转换
- HEX
- #c5c3b4
- RGB
- rgb(197 195 180)
- HSL
- hsl(53 13% 74%)
- HWB
- hwb(53 71% 23%)
- OKLCH
- oklch(0.815 0.021 100.7)
- OKLab
- oklab(0.815 -0.004 0.02)
- CIE Lab
- lab(78.64 -1.24 7.83)
- LCH
- lch(78.64 7.93 99)
- CMYK
- cmyk(0% 1% 9% 23%)
浅色调 · 深色调 · 灰色调
浅色调
- CBC9BB
- D0CFC3
- D6D5CA
- DCDBD2
- E2E1D9
- E7E7E1
- EDEDE8
- F3F3F0
- F9F9F7
深色调
- ABA99C
- 929085
- 79786E
- 616058
- 4B4A44
- 353430
- 21201D
- 0E0E0C
- 020202
灰色调
- BEBCAF
- B7B5A9
- B0AEA4
- A9A89F
- A2A19A
- 9B9A94
- 94948F
- 8D8D8A
- 878685
配色和谐
互补色 +180°
- C5C3B4
Comforting Grey
- BFC1D0
≈ Whomp Grey
类似色 -30° +30°
- C5C3B4
Comforting Grey
- CBC0B4
≈ Loophole
- BEC5B8
≈ Balsam
三角配色 +120° +240°
- C5C3B4
Comforting Grey
- B5C6CC
≈ Star Mist
- CCBDC6
≈ Silk Chiffon
分裂互补色 +150° +210°
- C5C3B4
Comforting Grey
- B9C4D0
≈ Plein Air
- C7BFCD
≈ Clary Sage
四角配色 +90° +180° +270°
- C5C3B4
Comforting Grey
- B4C7C5
≈ Surf Spray
- BFC1D0
≈ Whomp Grey
- CFBDBF
≈ Dusky Violet
对比度与无障碍
Ag
Fail白底
WCAG 1.77:1 · APCA Lc 33
Ag
AAA黑底
WCAG 11.83:1 · APCA Lc 70
最佳文字颜色: #000000
WCAG 11.83:1 (AAA) · APCA Lc 70
Contrast pairs
代码片段
CSS
:root {
--comforting-grey: #c5c3b4;
--comforting-grey-rgb: 197 195 180;
--comforting-grey-oklch: oklch(0.815 0.021 100.7);
}
.element {
color: var(--comforting-grey);
background-color: hsl(53 13% 74%);
border-color: oklch(0.815 0.021 100.7);
}Tailwind CSS v4
@theme {
--color-comforting-grey: #c5c3b4;
--color-comforting-grey-50: #f6f5ef;
--color-comforting-grey-100: #e9e8e0;
--color-comforting-grey-200: #d6d5cb;
--color-comforting-grey-300: #b9b8ac;
--color-comforting-grey-400: #a19f91;
--color-comforting-grey-500: #898777;
--color-comforting-grey-600: #747265;
--color-comforting-grey-700: #5d5b51;
--color-comforting-grey-800: #44433b;
--color-comforting-grey-900: #2f2e28;
--color-comforting-grey-950: #1c1b16;
}SCSS
$comforting-grey: #c5c3b4;
$comforting-grey-rgb: 197, 195, 180;
$comforting-grey-light: mix(#fff, $comforting-grey, 20%);
$comforting-grey-dark: mix(#000, $comforting-grey, 20%);
.element {
color: $comforting-grey;
box-shadow: 0 0 0 2px rgba($comforting-grey, 0.35);
}