现代CSS颜色函数需封装可变逻辑而非仅作语法糖：color-mix()须显式指定色彩空间并避免嵌套，oklch()依赖L值线性调控明度以保障可访问性，hwb()适合浅色系渐变，所有函数均需配合语义化变量与@supports降级。
现代 CSS 颜色函数（如 color-mix()、oklch()、hwb()、lab()）能直接在运行时计算颜色，替代大量手写色值或预处理器生成的变体，从而减少硬编码冗余。但它们不是“写了就自动去重”，关键在于**用函数封装可变逻辑，而非只当语法糖**。
用 color-mix() 替代固定灰阶变量
过去为按钮不同状态写 $btn-bg-light、$btn-bg-dark 等 Sass 变量，现在可直接用原生函数动态混合：
button {
background-color: color-mix(in srgb, #007bff 80%, white);
}
button:hover {
background-color: color-mix(in srgb, #007bff 60%, white);
}常见错误现象：在不支持 color-mix() 的旧浏览器中回退失效；未指定色彩空间（如漏写 in srgb）导致渲染偏差。
- 必须显式声明色彩空间，
color-mix(in oklch, ...)和in srgb结果差异明显 - 不能嵌套调用（如
color-mix(..., color-mix(...))），需拆成 CSS 变量中转 - 搭配 CSS 变量使用更可控：
--btn-base: #007bff; background: color-mix(in srgb, var(--btn-base) 70%, white);
用 oklch() 统一管理明度与饱和度梯度
传统方案靠多个 --color-50～--color-900 变量维护色阶；oklch() 允许用单一基准色 + 动态调整 L（亮度）、C（色度）生成整套系统：
立即学习“前端免费学习笔记（深入）”；
:root {
--primary: oklch(0.65 0.28 240); /* L=0.65, C=0.28, h=240 */
}
.card {
background: oklch(0.85 0.12 240); /* 更亮更灰 */
border-color: oklch(0.45 0.35 240); /* 更暗更艳 */
}使用场景：设计系统中需要保证不同组件间视觉对比度合规（如 WCAG AA/AAA），oklch() 的 L 值线性对应感知明度，比 hsl() 调整更可靠。
-
oklch()在 Safari 16.4+、Chrome 111+、Firefox 117+ 支持，Edge 同步 Chromium 版本 - 不要用
oklch()表示纯黑/纯白——oklch(0 0 0)和oklch(1 0 0)才是安全值，oklch(0 0 240)可能渲染异常 - 若需兼容旧浏览器，可用
@supports (color: oklch(0 0 0))包裹新写法，降级到hsl()或变量
用 hwb() 快速生成同色相渐变色，避免重复定义
当需要一组按钮从“主色”过渡到“浅底白字”再到“深底白字”，hwb() 比反复算 lighten()/darken() 更直观：
.btn-primary {
color: white;
background: hwb(200 10% 15%); /* hue=200, whiteness=10%, blackness=15% */
}
.btn-primary-outline {
color: hwb(200 40% 15%);
border: 1px solid hwb(200 20% 15%);
}性能影响：所有现代颜色函数都在样式计算阶段解析，无运行时开销；但过度嵌套（如在 calc() 里套 color-mix()）可能触发引擎降级处理。
-
hwb()的白度（whiteness）和黑度（blackness）之和不能超过 100%，否则被截断为 100%，例如hwb(200 80% 30%)实际按hwb(200 70% 30%)渲染 - 它对浅色系（高 whiteness）控制精准，但对深色系（高 blackness）不如
oklch()稳定，慎用于关键文本色 - 不能直接用在
filter: brightness()等函数中——CSS 函数之间目前不互通
真正减少冗余的不是函数本身，而是把「颜色关系」显式声明出来。比如 --accent: oklch(0.7 0.35 300); --accent-muted: oklch(0.7 0.1 300); 这种写法，比罗列十个独立变量更易维护——只要改一个 h 值，整套紫色系就同步偏移。这点容易被忽略：函数只是工具，语义化命名和层级抽象才是去重核心。
