HTML中使用CSS的oklch()颜色函数实现感知均匀的精确配色-html教程-PHP中文网

oklch现在可用但仅限chrome 112+/firefox 121+/safari 17.4+，旧版浏览器静默忽略整条声明；参数单位必须严格：l用%或0–1、c为无单位小数、h不带deg、alpha用/分隔；@supports检测需写在降级色之后且值带单位，色相跨0°/360°须手动拆段。

html中使用css的oklch()颜色函数实现感知均匀的精确配色

oklch()现在就能用，但只在 Chrome 112+、Firefox 121+、Safari 17.4+ 中生效；旧版本或多数安卓 WebView 会静默忽略整条声明，直接回退到前一条颜色（比如 color: oklch(60% 0.2 240); color: #3b82f6;，老浏览器只认 #3b82f6）。

oklch() 参数写错一个单位，整条 CSS 就失效

浏览器不报错、不警告，也不 fallback 到下一行——它直接跳过整条规则。这是上线后颜色“突然消失”或“全变灰”的最常见原因。

oklch(60 0.2 240) ❌ —— L 缺 %，Chrome 112+ 和 Safari 17.4+ 都拒斥
oklch(60% 20% 240) ❌ —— C 必须是无单位小数（如 0.2），不能写成百分比
oklch(60% 0.2 240deg) ❌ —— H 后加 deg 在 Safari 16.x 和部分安卓 WebView 中解析失败
oklch(60% 0.2 240 / 0.8) ✅ —— alpha 必须用 / 分隔，不能用逗号

安全写法只有两种：oklch(60% 0.28 258.5)（兼容性最高），或 oklch(0.6 0.28 258.5)（仅新浏览器支持，且 H 小数位建议 ≤1）。

@supports 检测必须写在降级色之后，且顺序不能反

只靠两行颜色声明（先 fallback，再 oklch()）在部分安卓 WebView 中会完全失效——它可能跳过所有后续规则，导致 oklch() 彻底不加载。

降级色必须写在 @supports 块外部且上方
检测值必须带单位：@supports (color: oklch(0% 0 0)) ✅，@supports (color: oklch(0 0 0)) ❌
绝对不要用 @supports not (color: oklch(0% 0 0))——安卓 WebView 存在解析 bug
别用 oklab() 替代检测——所有主流浏览器目前都返回 false

正确结构：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

button { background-color: #2563eb; }
@supports (color: oklch(0% 0 0)) {
  button { background-color: oklch(60% 0.28 258.5); }
}

渐变和动画中跨色相边界时，OKLCH 不自动走短弧

CSS 对 oklch() 渐变不做色相插值优化。oklch(0.7 0.25 350) → oklch(0.7 0.25 10) 会从 350° 经 360°、0°、10° 插值，中间段色度被强制拉低，出现难看的灰紫色带。

色相差超过 180° 时，必须手动拆成两段：linear-gradient(oklch(0.7 0.25 350), oklch(0.7 0.25 360), oklch(0.7 0.25 10))
禁用态建议固定 H，只降 C（如 0.28 → 0.12），L 最多微调 ±0.02
深色模式建议固定 H 和 C，只调 L（如 0.62 → 0.38）
color-mix(in oklch, ...) 要求两端都用 oklch() 值，混用 rgb() 或 hsl() 会导致整条声明被忽略