HTML怎么做CSS颜色函数_HTML CSS颜色函数lab lch oklch【新手必读】-html教程-PHP中文网

oklch()和lch()已部分支持但需谨慎使用：lch()自Safari 16.4+/Chrome 111+/Firefox 117+起可用，oklch()需Chrome 112+/Firefox 121+/Safari 17.4+；旧浏览器静默忽略整条声明，必须用@supports (color: oklch(0% 0 0))检测并确保fallback写在外部上方。

html怎么做css颜色函数_html css颜色函数lab lch oklch【新手必读】

现在就能用 oklch() 和 lch()，但别直接塞进生产环境——浏览器支持不齐、降级逻辑一错就变黑屏或灰块。

oklch() 和 lch() 的浏览器支持现状

截至 2026 年 4 月，lch() 在 Safari 16.4+、Chrome 111+、Firefox 117+ 可用；oklch() 要求更高：Chrome 112+、Firefox 121+、Safari 17.4+（即 iOS 17.4+ 才行）。旧版本浏览器不报错，而是**整条声明被静默忽略**，颜色回退到上一条规则。

写 color: oklch(60% 0.2 240); color: #666;，旧浏览器只认 #666
但若顺序反了——先写 @supports 块再写 fallback，部分安卓 WebView 会跳过后续所有声明
@supports (color: oklch(0% 0 0)) 是唯一可靠检测方式；@supports (color: oklab(0 0 0)) 在绝大多数当前浏览器里仍返回 false，不能当兜底依据

oklch() 参数必须带百分号，且 L/C/H 范围不能硬套 HSL

oklch() 的 L 是感知亮度（0%–100%），C 是色度（-0.4 到 0.4 或 -100% 到 100%），H 是色调角（0–360deg），三者都**必须带单位或百分号**。漏掉 % 会导致整条声明失效。

oklch(60 0.2 240) ❌ —— L 缺 %，被忽略
oklch(60% 0.2 240) ❌ —— C 缺单位，也无效
oklch(60% 20% 240deg) ✅ —— 全部显式标注单位
C 最大值不固定：sRGB 下绿色能撑到 ~0.35，红色可能卡在 ~0.25，超限会自动裁剪，但视觉上可能突然发灰

color-mix() 混合必须同色域，且不能靠 fallback 自动兜底

color-mix() 在旧浏览器里不是报错，而是**整个函数调用被忽略**，连带它所在的那条 CSS 声明都不生效。更关键的是：混合必须在同一个色彩空间内进行，混用 rgb() 和 oklch() 会直接解析失败。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

合法：color-mix(in oklch, oklch(60% 0.2 240), oklch(40% 0.3 300))
非法：color-mix(in oklch, oklch(60% 0.2 240), red) —— 浏览器拒绝解析整条声明
必须包裹：@supports (color: oklch(0% 0 0)) { ... color-mix(...) ... }，且 fallback 颜色写在 @supports 外部上方
别用 @supports not (color: oklch(0% 0 0)) 写降级块——部分安卓 WebView 对 not 解析异常

自定义属性 + 过渡动画会悄悄退化成 sRGB 插值

CSS 自定义属性本身不携带色彩空间信息。--c1: oklch(60% 0.2 240); --c2: oklch(40% 0.3 300); transition: color 0.3s; 看似合理，实际动画全程走 sRGB 线性插值，OKLab 的感知均匀性优势完全丢失，中间帧可能出现偏灰、突艳或色相偏移。