命名颜色 · #A3BBB3
Garden Twilight
Garden Twilight 即 #A3BBB3：rgb(163 187 179)、hsl(160 15% 69%)、oklch(0.772 0.029 173.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Garden Twilight color name →
#A3BBB3
oklch(0.772 0.029 173.5)
颜色转换
- HEX
- #a3bbb3
- RGB
- rgb(163 187 179)
- HSL
- hsl(160 15% 69%)
- HWB
- hwb(160 64% 27%)
- OKLCH
- oklch(0.772 0.029 173.5)
- OKLab
- oklab(0.772 -0.028 0.003)
- CIE Lab
- lab(73.87 -9.7 1.15)
- LCH
- lch(73.87 9.77 173.2)
- CMYK
- cmyk(13% 0% 4% 27%)
浅色调 · 深色调 · 灰色调
浅色调
- ACC2BA
- B5C8C2
- BECFC9
- C7D6D1
- D0DDD8
- DAE3E0
- E3EAE8
- ECF1EF
- F6F8F7
深色调
- 8DA29B
- 788A84
- 63736E
- 4F5C58
- 3C4643
- 2A322F
- 191F1D
- 0A0D0C
- 010201
灰色调
- A0B5AE
- 9CAFA9
- 99A9A3
- 95A39E
- 929D99
- 8E9794
- 8B918F
- 878B8A
- 848685
配色和谐
互补色 +180°
- A3BBB3
Garden Twilight
- C4AEB6
≈ Velvet Ears
类似色 -30° +30°
- A3BBB3
Garden Twilight
- AABAA9
≈ Rockfall
- A0BABD
≈ Hopeful Blue
三角配色 +120° +240°
- A3BBB3
Garden Twilight
- B5B2C6
≈ Bohemianism
- C4B0A4
≈ Vintage Charm
分裂互补色 +150° +210°
- A3BBB3
Garden Twilight
- BEAFBF
≈ Almost Plum
- C7AEAC
≈ Wispy Mauve
四角配色 +90° +180° +270°
- A3BBB3
Garden Twilight
- ABB5C8
≈ Spacious Sky
- C4AEB6
≈ Velvet Ears
- BEB4A1
≈ Oyster Shoal
对比度与无障碍
Ag
Fail白底
WCAG 2.03:1 · APCA Lc 40
Ag
AAA黑底
WCAG 10.31:1 · APCA Lc 63
最佳文字颜色: #000000
WCAG 10.31:1 (AAA) · APCA Lc 63
Contrast pairs
代码片段
CSS
:root {
--garden-twilight: #a3bbb3;
--garden-twilight-rgb: 163 187 179;
--garden-twilight-oklch: oklch(0.772 0.029 173.5);
}
.element {
color: var(--garden-twilight);
background-color: hsl(160 15% 69%);
border-color: oklch(0.772 0.029 173.5);
}Tailwind CSS v4
@theme {
--color-garden-twilight: #a3bbb3;
--color-garden-twilight-50: #edf8f5;
--color-garden-twilight-100: #dfebe7;
--color-garden-twilight-200: #c8d8d3;
--color-garden-twilight-300: #a9bcb7;
--color-garden-twilight-400: #8ea49d;
--color-garden-twilight-500: #738d84;
--color-garden-twilight-600: #627770;
--color-garden-twilight-700: #4e5f5a;
--color-garden-twilight-800: #394641;
--color-garden-twilight-900: #27302d;
--color-garden-twilight-950: #151c1a;
}SCSS
$garden-twilight: #a3bbb3;
$garden-twilight-rgb: 163, 187, 179;
$garden-twilight-light: mix(#fff, $garden-twilight, 20%);
$garden-twilight-dark: mix(#000, $garden-twilight, 20%);
.element {
color: $garden-twilight;
box-shadow: 0 0 0 2px rgba($garden-twilight, 0.35);
}