示例 使用此工具转换的原始艺术作品。拖动手柄；在支持 HDR 的浏览器中，右侧会发光。 “使用这个”将原件加载到上面的工具中。显示：拖动以比较原始和 HDR ◂▸ 原始 HDR 字标黑底白字 — 经典案例。白色是自动选择的。发光：白色 HDR JPEG LinkedIn PQ Reveal：拖动以比较原始和 HDR ◂▸ 原始 HDR 轨道标记 白色环加一种品牌颜色。白色和蓝色都被推向同一高峰。发光：白色 + #2f6bff HDR JPEG LinkedIn PQ Reveal：拖动以比较原始和 HDR ◂▸ 原始 HDR 贴纸徽章 深青色上的奶油色类型 — 非白色，因此选择它作为颜色。深色背景上的浅色元素发光效果最好。发光：#f5e9c8 HDR JPEG LinkedIn PQ 工作原理 您的 JPEG 保持普通 JPEG。对于网络，我们添加了 ISO 21496-1 增益图 - 第二个微小的灰度图像，告诉 HDR 感知软件每个像素可以变亮多少。对于 LinkedIn，我们将像素与匹配的 ICC 配置文件写入 BT.2100 PQ，LinkedIn 会保留该配置文件。什么发光效果最好 深色背景上的浅色、近白色元素。强（+2.9 档，约 1,500 尼特）是实际测量的最佳点。深色并不能真正发光——增强它们就像洗过的霓虹灯一样。诚实限制 HDR 仅在支持增益图或 PQ 配置文件的软件（Chrome、Safari 26、Apple Photos、LinkedIn 的应用程序）中的 HDR 显示器上显示。大多数其他平台都会剥离或标准化它——文件在那里看起来仍然完全正常。也适用于文本 文本也可以比白色更亮。 CSS 还没有办法编写比 #FFFFFF 更亮的颜色 - CSS Color HDR 中的 HDR 颜色空间仍然是一个草案。但是您可以通过 HDR 图像绘制真实文本：background-clip：文本将字形变成增益图 JPEG 上的窗口。本页顶部的标题正是这样的——选择它，它是文本。比白色亮 SDR 文本颜色：#fff 比白色亮 HDR 文本背景剪辑：样本上的文本 检查您的显示器和浏览器... 工作地点：增益图 JPEG 渲染的任何位置 — Chrome 137+、Safari 26 / iOS 26 — 在 HDR 显示器上。在其他地方，样本的基本图像会透过，因此文本只是白色。没有任何损坏。样本是 64×64 白色 JPEG，带有统一增益图（7.5×，+2.9 档，约 1,500 尼特）；浏览器会在字形下缩放它。任何增强都有效：将白色方块上传到上面的工具并选择强度。在显示器上对其进行门控：在@media（动态范围：高）内部，只有 HDR 屏幕采用图像路线； SDR 访问者、Firefox 和打印保持真实的色彩。这也回避了一个问题——background-clip 只在元素框内绘制墨水，因此溢出的线条会被剪掉。仅标题和重音。 1,500 尼特的一段是充满敌意的。如果您的 ::selection 尚不可见，请为 ::selection 指定颜色。为什么不过滤：brightness()？页面以SDR合成；没有滤镜或混合模式可以使 CSS 颜色超过白色。只有 HDR 内容才能获得余量——这就是样例。 style.css /* 1. HDR“绘画”：纯白色增益图 JPEG (1.3 KB)。从 soverybright.com/hero/white-7.5x.jpg 获取或制作自己的：将白色方块上传到上面的工具。 */ /* 2. 通过它绘制真实文本 - 但仅限于 HDR 显示器。其他人都保留真实的颜色：没有额外的获取，没有剪裁风险。 */ @media (动态范围: 高) { @supports (background-clip: 文本) 或 (-webkit-background-clip: 文本) { .hdr-text { 背景: url("white-7.5x.jpg") 中心/封面; -webkit-background-clip：文本；背景剪辑：文本；颜色：透明； } } } index.html

比白色更亮

下载样本（white-7.5x.jpg，1.3 KB） - 或者以其他强度制作自己的样本。