CSScolor-mix实现明暗颜色变化技巧

想精准控制颜色明暗而不失饱和、不偏色相、不牺牲可访问性？CSS 的 `color-mix()` 函数配合 `oklch` 色彩空间正是目前最科学、最可控的解决方案——它在亮度（L）维度上做线性物理级调整，彻底规避了 `srgb` 混合冲淡失真和 `hsl` lightness 非感知、非一致、色相漂移等顽疾；配合 `@supports` 检测与精心设计的手动 fallback，还能优雅兼容旧浏览器；更关键的是，它原生支持深色模式动态响应——但需为不同背景重新校准混合比例，因为人眼在暗环境下对亮度变化极度敏感。这不是炫技，而是现代 CSS 颜色工程走向精准化、可预测与无障碍的真正拐点。

color-mix() 生成明暗色的基本写法

直接用 color-mix() 混合目标色和黑/白，是目前最可控的亮度调节方式。它不依赖 HSL 转换、不改变色相偏移，也不受浏览器自动降级影响（Chrome 111+、Safari 16.4+、Firefox 118+ 已支持）。

常见错误是写成 color-mix(in srgb, #3b82f6 70%, black 30%) —— 这样混合结果偏灰、饱和度暴跌，因为 srgb 空间下黑白混入会“冲淡”原色，不是真正意义上的“变暗”。

正确做法是切换到 lch 或 oklch 色彩空间，在亮度（L）维度上做线性调整：

• color-mix(in oklch, #3b82f6 70%, oklch(0% 0 0) 30%) → 变暗（黑是 oklch(0% 0 0)）
• color-mix(in oklch, #3b82f6 70%, oklch(100% 0 0) 30%) → 变亮（白是 oklch(100% 0 0)）

oklch 比 lch 更推荐：亮度 L 值与人眼感知更一致，且在深色模式下过渡更自然。

为什么不用 hsl() lightness 调节？

很多人习惯写 hsl(210, 70%, 60%) 再手动改第三个参数，但这本质是“模拟”，不是“计算”。HSL 的 lightness 并非物理亮度，同一 lightness 值下，蓝色和黄色的实际相对亮度差一倍以上；而且 HSL 不支持插值保色相，hsl(210, 70%, 40%) 到 hsl(210, 70%, 80%) 中间色可能发紫或发青。

更关键的是：HSL 无法表达所有可显示颜色（尤其高饱和蓝/绿），而 oklch 覆盖整个 sRGB 范围，且 L 值 0–100% 真实对应相对亮度（0% = 最暗，100% = 最亮）。

所以，除非你明确只要粗略视觉微调、且兼容 IE/旧 Safari，否则别碰 hsl() 做明暗推导。

兼容 fallback 怎么写才不翻车？

CSS 自定义属性 + @supports 是唯一靠谱方案。别用 JS 注入或构建时预编译 —— 颜色需要运行时响应主题切换（比如深色模式下，同一 --primary 变了，它的暗色也得跟着变）。

示例写法：

button {
  --primary: #3b82f6;
  --primary-dark: color-mix(in oklch, var(--primary) 70%, oklch(0% 0 0) 30%);
  background-color: var(--primary-dark);
}
<p>@supports not (background-color: color-mix(in oklch, red, blue)) {
button {
--primary-dark: #1d4ed8; /<em> 手动 fallback，不能用 hsl() 计算 </em>/
}
}</p>

注意：@supports 必须检查 color-mix() 全写法，只写 color-mix 会被某些浏览器误判为支持；fallback 值建议用设计系统里已验证过的、同色系的手动调色，而不是靠工具临时算——工具算的 HSL fallback 在深色背景下常过亮，反而破坏对比度。

暗色模式下亮度比例要重设

同一个 color-mix(in oklch, #3b82f6 70%, oklch(0% 0 0) 30%) 在深色背景上会显得太暗，文字可读性崩坏。这不是 bug，是 oklch 的 L 值本就是相对亮度，需结合上下文重新平衡。

实际项目中，通常要为深色模式单独定义比例：

• 浅色模式：主色 70% + 黑 30%
• 深色模式：主色 90% + 黑 10%（或直接用 oklch(calc(L * 0.9) c h) 动态缩放 L）

别指望一套 mix 参数通吃两种模式。人眼在暗环境对亮度变化更敏感，微小的 L 值变动在深色下会被放大，这点容易被忽略。

好了，本文到此结束，带大家了解了《CSScolor-mix实现明暗颜色变化技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！