css无法实现真hdr，因所有颜色函数均被强制截断至sdr的0–100 nits范围；@media (dynamic-range: high)仅检测硬件支持，不触发hdr渲染；color(display-p3)只扩色域不提亮度；真hdr需webgpu rgba16float+hdr10输出链路。
CSS 无法准确表达 HDR 超亮颜色——所有 rgb()、oklch()、color(display-p3) 值在浏览器中仍被强制解释为 SDR（0–100 nits），亮度 >100% 的部分会被无声截断，无警告、不报错、不提示。
为什么 @media (dynamic-range: high) 不起作用
这个媒体查询只返回设备是否“宣称支持 HDR”，和实际渲染完全无关：
-
window.matchMedia('(dynamic-range: high)').matches在 Chrome/Firefox 当前（2026 年 9 月）恒为false；仅 Safari 17.4+ 在 macOS 开启系统 HDR 开关后可能返回true - 即使匹配成功，
background-color: oklch(120% 0.4 270)中的120%仍被 clamp 到100%，浏览器不会提升输出亮度 - 它不触发任何 CSS 渲染管线切换，
div和button永远走 SDR 合成路径
color(display-p3) 只扩展色域，不提升动态范围
很多人误以为写 color(display-p3 1 0.3 0.2) 就能“用上 HDR”——其实它只解决广色域问题，亮度上限仍是 100 nits：
- sRGB 白点是 D65 @ 100 cd/m²；display-p3 白点也是 D65 @ 100 cd/m²，只是绿色/红色坐标更宽
- 若你从设计稿复制一个 P3 色值但漏写
color(display-p3)前缀，浏览器会按 sRGB 解释，导致颜色偏移（如#FF6347在 P3 屏上显示偏粉） - Chrome DevTools → Rendering → Emulate color gamut 可验证这种偏差，但它依然无法让颜色“更亮”
真正 HDR 输出必须绕过 CSS 颜色系统
如果你的应用确实需要输出 BT.2100/PQ 信号（比如视频校色工具、HDR 预览面板），唯一可行路径是 WebGPU：
- 用
GPUTextureFormat.rgba16float存储亮度值（允许 >1.0），而非rgba8unorm - 调用
GPUContext.configure({ presentationFormat: "hdr10" })显式启用 HDR 输出链路 - 当前仅 Chrome 125+ 在启用
chrome://flags#enable-webgpu-developer-features后提供实验性支持，且依赖 GPU 驱动 + 显示器全程开启 HDR 模式 -
<video></video>元素要真 HDR 播放，需视频本身含 PQ 元数据 + 系统 HDR 开关打开 + 浏览器未降级为 SDR 解码（无 CSS 控制权）
最容易被忽略的一点：HDR 不是“更亮的颜色”，而是“可区分的亮度层级”。CSS 的所有颜色函数都运行在 8–16 位整数或归一化浮点（0–1）管线中，没有原生机制表达 1000–10000 nits 的物理亮度差。所谓“HDR 主题”，本质是用 color-mix(in oklab, ...) 做感知一致的明度过渡——它不输出 HDR，但能避免暗色模式下文字发灰、亮色模式下按钮过曝。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
