@media (dynamic-range: high) 仅声明设备hdr硬件能力，不触发颜色变化或hdr渲染；css仍按sdr处理，oklch亮度被截断，真hdr需webgpu rgba16float纹理及系统级支持。

@media (dynamic-range: high) 不能用来“优化颜色”，它只声明设备能力，不改变 CSS 渲染行为。所有 rgb()、hsl()、oklch() 函数仍被解析为 SDR 值，亮度强制 clamp 在 0–100 nits 范围内，浏览器不会因此切换 HDR 模式或提升输出亮度。

为什么 @media (dynamic-range: high) 不触发任何颜色变化

这个媒体查询只是静态声明“这台设备硬件支持 HDR”，和系统是否开启 HDR、浏览器是否启用 HDR 渲染、显示器是否处于 HDR 模式完全无关：

• macOS Safari 可能在未开启“高动态范围”系统开关时就返回 true
• Chrome 和 Firefox 当前（2026 年 6 月）仍不支持该查询，window.matchMedia('(dynamic-range: high)').matches 恒为 false
• 即使匹配成功，background-color: oklch(120% 0.4 270) 中的 120% 会被截断为 100%，无任何警告
• 普通 HTML 元素（div、p、button）永远走 SDR 渲染管线，CSS 层面无法绕过

color-mix(in oklab, ...) 是当前唯一实用的颜色稳定性方案

虽然它不输出 HDR，但能避免深色/浅色主题下颜色发灰或过曝——因为 oklab 对明度（L）和色度（a/b）解耦更符合人眼感知：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须显式写 in oklab，省略则退化为 sRGB 非线性混合，深色背景下文字易“发虚”
• 示例：color-mix(in oklab, var(--primary) 60%, white 40%) 在深色模式下保持可读，在浅色模式下不刺眼
• 对比 rgba(var(--primary), 0.6)：后者在暗背景上常出现雾感，因 sRGB 混合未校正亮度感知
• 它不依赖媒体查询，也不需要用户开启 HDR，兼容性好（Chrome 111+、Safari 16.4+、Firefox 115+）

真 HDR 输出必须脱离 CSS，走 WebGPU 或 Canvas 底层路径

如果你的应用确实需要 BT.2100/PQ 信号输出（如专业视频预览、HDR 校色工具），CSS 完全无能为力：

• Canvas 2D / WebGL / OffscreenCanvas 均不支持 HDR 纹理格式；getContext('2d', {colorSpace: 'display-p3'}) 只扩展色域，不提升动态范围
• WebGPU 是目前唯一明确支持 HDR 渲染管线的标准：需用 GPUTextureFormat.rgba16float 存储高精度亮度值，并在 GPUContext.configure() 中指定 presentationFormat: "hdr10"
• 仅 Chrome 125+ 在启用 chrome://flags#enable-webgpu-developer-features 后提供实验性支持，且依赖 GPU 驱动和显示器全程支持
• HTML 中的 video 元素要真正输出 HDR，还需视频本身含 mdcv 元数据，且设置 video-dynamic-range="hdr"（该属性仅对 <video></video> 生效，与 CSS 无关）

最容易被忽略的一点：即使你写了 @media (dynamic-range: high) 并匹配成功，只要没在 WebGPU 中创建 rgba16float 纹理、没在系统级开启 HDR、没验证显卡驱动支持 WHQL HDR，那所有“HDR 相关”的 CSS 写法都只是视觉错觉。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！