为什么CSS中深色模式下不能直接使用固定的HEX色彩代码？-css教程-PHP中文网

深色模式下不能直接使用固定的hex色彩代码，是因为固定色值无法根据背景明暗自动调整对比度，会导致文字与背景融合或刺眼。正确的做法是使用css颜色函数（如`color-mix()`）或hsl色彩空间，将基础色与背景色混合，或者动态计算亮度，从而确保在任何背景下都保持可读性。

为什么CSS中深色模式下不能直接使用固定的HEX色彩代码？

为什么固定HEX在深色背景上会失效

固定HEX代码（如`#333333`）是绝对的颜色定义，它不包含任何关于环境的信息。当背景从白色变为黑色时，原本在白色背景上清晰的深灰色文字会变得几乎看不见，因为两者的亮度差（Luminance Contrast）不足。WCAG标准通常要求至少4.5:1的对比度，而固定色值无法保证这一点。

为什么CSS中深色模式下不能直接使用固定的HEX色彩代码？

/* 错误示范：固定HEX */
.dark-mode {
  background-color: #000000;
  color: #333333; /* 对比度极低，难以阅读 */
}

/* 正确示范：使用HSL动态调整 */
.dark-mode {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 85%); /* 高亮度白色，对比度高 */
}

如何使用CSS变量实现自适应色彩

通过CSS自定义属性（变量），可以结合`light-dark()`函数或媒体查询来切换不同的色彩方案。这种方法允许开发者定义一套语义化的颜色名称，然后在不同主题下映射到具体的HEX或HSL值。这种方式比硬编码HEX更灵活，且易于维护。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

为什么CSS中深色模式下不能直接使用固定的HEX色彩代码？

:root {
  --text-primary: #000000;
  --bg-primary: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #ffffff;
    --bg-primary: #121212;
  }
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}