HTML中如何使用oklch颜色空间获得更均匀的色彩-html教程-PHP中文网

oklch必须在css规则中用oklch()函数声明并配好降级和单位才生效，内联style属性易失效；l需带%、c为数字、h推荐带deg，须写在rgb()回退之后，且仅@supports(color:oklch(0% 0 0))检测可靠。

html中如何使用oklch颜色空间获得更均匀的色彩

OKLCH 在 HTML/CSS 中不能直接写在 HTML 标签的 style 属性里“生效”，它只作为 CSS 颜色值使用；真正起作用的是在 CSS 规则中用 oklch() 函数声明颜色，并配好降级和单位——否则多数浏览器会静默忽略，页面变黑或灰。

oklch() 必须写在 CSS 里，且顺序和单位不能错

HTML 的 style 属性（如 style="background-color: oklch(60% 0.28 258.5);"）理论上可行，但实测中 Chrome 112–115、Safari 17.4 在内联样式里对小数位敏感、对缺失单位更苛刻，容易整条失效。稳妥做法是只在外部或 <style></style> 块中使用，并确保：

oklch() 声明必须写在回退颜色（如 rgb() 或 #hex）之后，靠 CSS 级联自然降级
L 值必须带 %（60% ✅，0.6 ❌），C 值必须是数字（0.28 ✅，28% ❌），H 值推荐带 deg（258.5deg ✅，258.5 在部分 Safari 版本中不稳定）
不要用逗号分隔：oklch(60%, 0.28, 258.5deg) 会完全失效
alpha 通道必须用斜杠语法：oklch(60% 0.28 258.5 / 0.8)，旧版 Chromium 对 / 前后空格敏感，建议紧贴写

@supports 检测是唯一靠谱的兼容性兜底方式

仅靠写两条颜色声明（background-color: #2563eb; background-color: oklch(0.62 0.28 258.5);）不够——某些安卓 WebView 会跳过所有后续声明。必须用 @supports 显式包裹 OKLCH 专属逻辑：

button {
  background-color: #2563eb;
}
@supports (color: oklch(0% 0 0)) {
  button {
    background-color: oklch(0.62 0.28 258.5);
    /* 可在此处加 color-mix(), 或基于 OKLCH 的禁用态规则 */
  }
}

注意：@supports (color: oklab(0 0 0)) 不可靠，当前所有主流浏览器都返回 false；也不要写 @supports not，部分 WebView 解析异常。