css中不存在真正的hdr输出，所有color level 4语法如oklch()、color(display-p3)等均运行于sdr管线，亮度被强制限制在0–100 nits，仅实现宽色域与感知均匀性，而非高动态范围。
SDR和HDR在CSS里根本不是同一套东西
浏览器目前不支持真正的HDR输出，所有oklch()、color(display-p3)、ictcp()等Color Level 4语法，都只是在SDR管线里跑——亮度被硬性clamp到0–100 nits，oklch(120% 0.3 270)和oklch(100% 0.3 270)渲染结果几乎一样。所谓“HDR颜色”在CSS中并不存在，它只是宽色域+感知均匀性的SDR表达。
color(display-p3)生效条件极其苛刻
color(display-p3)只扩展色域，不提升亮度动态范围，且实际走P3渲染路径需同时满足：
- 系统层：macOS/iOS默认开启，Windows HDR开关对网页无效；企业MDM策略可能禁用
- 浏览器层：Safari最稳定；Chrome 125+需手动开启
chrome://flags#enable-color-gamut-p3；Firefox仍无实质支持 - 页面上下文：
<meta name="color-scheme" content="light dark">缺失、父元素用了transform或filter、未用@supports (color: color(display-p3 0 0 0))包裹，都会导致退化回sRGB
真正影响视觉一致性的其实是color-mix(in oklab, )
虽然不能输出HDR，但color-mix(in oklab, )是当前唯一能改善深浅主题下颜色行为的实用方案：
- 必须显式写
in oklab，省略则退化为gamma非线性混合，深色背景下易发虚 -
color-mix(in oklab, var(--primary) 60%, white 40%)在暗背景上不会突然变灰，浅背景上也不易过曝 - 对比
rgba(var(--primary), 0.6)：后者在暗背景下常出现雾感，因sRGB混合不尊重人眼对亮度的感知一致性
想用真HDR？得彻底绕开CSS
CSS本身没有HDR输出能力，Web平台唯一可行路径是WebGPU：
-
<canvas></canvas>、WebGL、OffscreenCanvas全都不支持HDR纹理格式 - 需创建
GPUTextureFormat.rgba16float纹理，并在GPUContext.configure()中指定presentationFormat: "hdr10" - 仅Chrome 125+实验性支持，需启用
chrome://flags#enable-webgpu-developer-features，且依赖GPU驱动和显示器硬件链路
实际开发中，最容易被忽略的是：你写的每一个oklch()值，在DevTools里看着再高，也进不了HDR管线——它只是SDR里的一个更精细的色点坐标而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
