命名颜色 · #B1A4B4
Midsummer Twilight
Midsummer Twilight 即 #B1A4B4：rgb(177 164 180)、hsl(289 10% 67%)、oklch(0.735 0.027 319.9)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Midsummer Twilight color name →
#B1A4B4
oklch(0.735 0.027 319.9)
颜色转换
- HEX
- #b1a4b4
- RGB
- rgb(177 164 180)
- HSL
- hsl(289 10% 67%)
- HWB
- hwb(289 64% 29%)
- OKLCH
- oklch(0.735 0.027 319.9)
- OKLab
- oklab(0.735 0.021 -0.017)
- CIE Lab
- lab(68.87 7.08 -6.49)
- LCH
- lch(68.87 9.61 317.5)
- CMYK
- cmyk(2% 9% 0% 29%)
浅色调 · 深色调 · 灰色调
浅色调
- B9ADBB
- C0B6C3
- C8BFCA
- D0C8D1
- D7D1D9
- DFDAE0
- E7E3E8
- EFECF0
- F7F6F7
深色调
- 998E9C
- 837985
- 6C646E
- 575058
- 423D44
- 2F2B30
- 1C1A1D
- 0C0A0C
- 010102
灰色调
- ACA0AF
- A79DA9
- A299A4
- 9D959F
- 98929A
- 938E94
- 8E8B8F
- 8A878A
- 858485
配色和谐
互补色 +180°
- B1A4B4
Midsummer Twilight
- A1AE9E
≈ Wormwood Green
类似色 -30° +30°
- B1A4B4
Midsummer Twilight
- A8A7BA
≈ Curated Lilac
- B7A3AB
≈ Magical Mauve
三角配色 +120° +240°
- B1A4B4
Midsummer Twilight
- B2A897
≈ Raffia Greige
- 96AFB0
≈ Sliding
分裂互补色 +150° +210°
- B1A4B4
Midsummer Twilight
- AAAB98
≈ Amazon Vine
- 99AFA6
≈ Lovage Green
四角配色 +90° +180° +270°
- B1A4B4
Midsummer Twilight
- B8A59A
≈ Pick of the Litter
- A1AE9E
≈ Wormwood Green
- 99ADB7
≈ Pacific Bliss
对比度与无障碍
Ag
Fail白底
WCAG 2.37:1 · APCA Lc 47
Ag
AAA黑底
WCAG 8.83:1 · APCA Lc 55
最佳文字颜色: #000000
WCAG 8.83:1 (AAA) · APCA Lc 55
Contrast pairs
代码片段
CSS
:root {
--midsummer-twilight: #b1a4b4;
--midsummer-twilight-rgb: 177 164 180;
--midsummer-twilight-oklch: oklch(0.735 0.027 319.9);
}
.element {
color: var(--midsummer-twilight);
background-color: hsl(289 10% 67%);
border-color: oklch(0.735 0.027 319.9);
}Tailwind CSS v4
@theme {
--color-midsummer-twilight: #b1a4b4;
--color-midsummer-twilight-50: #f9f3fa;
--color-midsummer-twilight-100: #ece5ed;
--color-midsummer-twilight-200: #dad1db;
--color-midsummer-twilight-300: #beb3c0;
--color-midsummer-twilight-400: #a69aa9;
--color-midsummer-twilight-500: #8e8192;
--color-midsummer-twilight-600: #786d7b;
--color-midsummer-twilight-700: #605763;
--color-midsummer-twilight-800: #464049;
--color-midsummer-twilight-900: #312c32;
--color-midsummer-twilight-950: #1d191e;
}SCSS
$midsummer-twilight: #b1a4b4;
$midsummer-twilight-rgb: 177, 164, 180;
$midsummer-twilight-light: mix(#fff, $midsummer-twilight, 20%);
$midsummer-twilight-dark: mix(#000, $midsummer-twilight, 20%);
.element {
color: $midsummer-twilight;
box-shadow: 0 0 0 2px rgba($midsummer-twilight, 0.35);
}