目前CSS无法实现真正的HDR效果，因为浏览器未打通HDR输出链路，oklch()等函数仅在SDR范围内解析，亮度被限制在0–100 nits；真正HDR需PQ/HLG标记、系统HDR模式、硬件全链路支持，Web平台尚未满足；当前实用方案是用color-mix(in oklab, ...)做视觉更稳定的颜色混合，或通过WebGPU底层API实现HDR渲染。
目前无法在 CSS 中可靠定义真正的 HDR 颜色用于生产环境 —— 浏览器尚未实现 HDR 输出链路，oklch()、ictcp() 等函数仅解析为 SDR 值，显示器也不会切换到 HDR 模式。
为什么 oklch(70% 0.2 210) 不等于 HDR 效果
CSS Color Level 4 引入的 oklch()、jzazbz()、ictcp() 是「宽色域 + 更好感知均匀性」的色彩空间，不是 HDR 输出协议。它们能在 SDR 显示器上更精准地表达深蓝、亮青等 sRGB 难以覆盖的色点，但亮度值仍被 clamped 到 0–100%（即 0–100 nits）。真正的 HDR 要求：内容标记为 PQ 或 HLG、系统启用 HDR 模式、浏览器支持 color-gamut: p3 + dynamic-range: high 媒体查询、显卡/驱动/显示器全程传递 >100 nits 亮度信号 —— 这些目前在 Web 平台均未打通。
- 你在 DevTools 里看到
oklch(90% ...)，实际渲染仍是 SDR 白点（D65, 80 nits）下的映射结果 -
dynamic-range-limit: high属性尚无浏览器实现，@media (dynamic-range: high)返回 false - 即使使用
color(display-p3 ...)，也只扩展色域，不提升亮度动态范围
color-mix(in oklab, ...) 是当前最实用的 HDR 相关操作
虽然不能输出 HDR，但 oklab 色彩空间对明度（L）和色度（a/b）解耦更合理，做颜色混合时视觉更稳定，尤其适合深色/浅色主题自动适配：
- 用
color-mix(in oklab, var(--primary) 60%, white 40%)生成强调色，比rgba(--primary, 0.6)在深色背景上更可读 - 同一组 mix 规则，在深色模式下不会突然变灰，在浅色模式下也不会过曝 —— 因为 oklab 的 L 通道近似人眼感知亮度
- 注意：必须写
in oklab，不能省略；in srgb混合仍会受 gamma 影响，导致深色背景下颜色“发虚”
真正想用 HDR？得绕开 CSS，走 Canvas 或 WebGPU
Web 平台唯一能触达 HDR 输出的路径是底层渲染 API：
- Canvas 2D 上下文目前不支持 HDR；但
OffscreenCanvas配合GPUTexture可创建 BT.2100/PQ 格式纹理（需GPUDevice支持texture-compression-hdr） - WebGPU 是目前唯一明确支持 HDR 渲染管线的标准：可通过
GPUTextureFormat.rgba16float存储高精度亮度值，并用presentationFormat: "hdr10"声明输出目标（Chrome 125+ 实验性支持） - CSS 里的
color(display-p3 0.8 0.2 0.1)或oklch()仅用于样式计算，不会触发任何 HDR 合成行为
别被「HDR 色彩空间」这个词带偏 —— 它们是为未来 HDR 准备的语义基础，不是即插即用的 HDR 开关。现在能落地的，只有用 oklab 做更靠谱的混合，以及用 color-contrast() 做更鲁棒的文字反色。真要驱动 HDR 显示器，CSS 还没拿到那把钥匙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
