让标志和文字比白色更耀眼：HDR JPEG 工具实现亮度提升 7.5 倍！
上传一个标志，选择要呈现发光效果的颜色，即可下载一张 HDR JPEG 图片。在 HDR 屏幕上，所选部分的亮度最高可比 `#FFFFFF` 亮 7.5 倍，而在其他设备上，它就是普通的 JPEG 图片。
将标志拖到指定区域，或者点击选择文件。该工具支持 PNG、JPEG 或 WebP 格式，免费使用，且不存储任何数据。其具有以下特点：
- ISO 21496 - 1 增益图 JPEG；
- 适用于 LinkedIn 的 BT.2100 PQ 格式；
- 基础像素保持不变；
- 不存储任何数据；
- 免费。
对比两个相同的 `#FFFFFF` 方块，其中一个带有增益图。SDR 白色是屏幕正常能达到的亮度，而带有增益图的相同白色在 HDR 显示屏上亮度最高可达 7.5 倍，即 HDR 白色，亮度提升 +2.9 档。同时，会进行实时 HDR 模拟效果检测，正在检测显示屏和浏览器。
示例展示
这里展示的是使用此工具转换后的原始作品。拖动滑块，在支持 HDR 的显示屏和浏览器中，右侧部分会发光。点击“使用此效果”可将原始图片导入到上方的工具中。
- 文字标志：经典的黑底白字效果，白色部分会自动被选中。发光部分为白色，可使用此效果获取 [HDR JPEG](/examples/wordmark-hdr.jpg) [LinkedIn PQ](/examples/wordmark-linkedin.jpg)。拖动滑块对比原始图 [文字标志 — 原始图](/examples/wordmark.png) 和 HDR 图 [文字标志 — HDR 图](/examples/wordmark-hdr.jpg)。
- 轨道标志：一个白色圆环加上一种品牌色，白色和蓝色都会被提升到相同的峰值亮度。发光部分为白色 + #2f6bff，可使用此效果获取 [HDR JPEG](/examples/orbit-hdr.jpg) [LinkedIn PQ](/examples/orbit-linkedin.jpg)。拖动滑块对比原始图 [轨道标志 — 原始图](/examples/orbit.png) 和 HDR 图 [轨道标志 — HDR 图](/examples/orbit-hdr.jpg)。
- 贴纸徽章：深青色背景上的米色文字，并非白色，因此它被作为一种颜色选中。深色背景上的亮色元素发光效果最佳。发光部分为 #f5e9c8，可使用此效果获取 [HDR JPEG](/examples/badge-hdr.jpg) [LinkedIn PQ](/examples/badge-linkedin.jpg)。拖动滑块对比原始图 [贴纸徽章 — 原始图](/examples/badge.png) 和 HDR 图 [贴纸徽章 — HDR 图](/examples/badge-hdr.jpg)。
工作原理
JPEG 图片本质上还是普通的 JPEG 图片。对于网页，会添加一个 ISO 21496 - 1 增益图，这是一个极小的灰度图像，它会告诉支持 HDR 的软件每个像素可以提升多少亮度。对于 LinkedIn，会使用 BT.2100 PQ 格式写入像素，并搭配匹配的 ICC 配置文件，LinkedIn 会保留这些信息。
最佳发光效果元素
深色背景上的亮色、接近白色的元素能实现最佳发光效果。实测在现实场景中，亮度提升 +2.9 档（约 1500 尼特）是最佳效果。而深色无法实现很好的发光效果，提升亮度后会看起来像褪色的霓虹灯。
实际限制
HDR 效果仅能在支持增益图或 PQ 配置文件的软件（如 Chrome、Safari 26、Apple Photos、LinkedIn 应用程序）的 HDR 显示屏上显示。大多数其他平台会去除或标准化这些效果，但文件在这些平台上看起来依然正常。
文字同样可以比白色更耀眼
目前 CSS 还无法定义比 `#FFFFFF` 更亮的颜色，CSS Color HDR 中的 HDR 色彩空间仍处于草案阶段。但可以通过一张 HDR 图片来呈现真实的文字效果：使用 `background-clip: text` 可以将文字变成一个窗口，展示增益图 JPEG 的内容。本页面顶部的标题正是这样实现的，选中它会发现它是文字。
SDR 文字的颜色为 `color: #fff`，而 HDR 文字通过 `background-clip: text` 覆盖色块实现比白色更亮的效果。同样会进行实时 HDR 模拟效果检测，正在检测显示屏和浏览器。
- 适用场景：在支持增益图 JPEG 渲染的设备（Chrome 137+、Safari 26 / iOS 26）的 HDR 显示屏上可呈现效果。在其他设备上，色块的基础图像会显示出来，文字就是普通的白色，不会出现异常。
- 色块：是一个 64×64 的白色 JPEG 图片，带有均匀的增益图（7.5 倍，+2.9 档，约 1500 尼特），浏览器会在文字下方对其进行缩放。任何亮度提升都可行，将一个白色方块上传到上方工具中并选择强度即可。
- 根据显示屏适配：在 `@media (dynamic-range: high)` 中，只有 HDR 屏幕会采用图片方式，SDR 设备、Firefox 浏览器和打印场景下仍使用真实的 `color` 属性。这样也能避免 `background-clip` 只能在元素框内绘制颜色，导致溢出的文本行可能被裁剪的问题。
- 仅用于标题和强调部分：段落文字亮度达到 1500 尼特会影响阅读体验。如果 `::selection` 颜色不明显，请为其设置颜色。
- 为何不使用 `filter: brightness()`：页面是在 SDR 模式下合成的，没有滤镜或混合模式能让 CSS 颜色超过白色。只有 HDR 内容才能实现更高的亮度，这就是色块的作用。
以下是相关代码示例：
style.css 复制/* 1. 一张 HDR “画布”：一张纯白色增益图 JPEG（1.3 KB）。可从 soverybright.com/hero/white-7.5x.jpg 获取，也可以自己制作：将一个白色方块上传到上方工具中。 *//* 2. 通过它来绘制真实文字 —— 但仅在 HDR 显示屏上生效。其他设备仍使用真实颜色：无需额外加载，也没有裁剪风险。 */@media (dynamic-range: high) { @supports (background-clip: text) or (-webkit-background-clip: text) { .hdr-text { background: url("white-7.5x.jpg") center / cover; -webkit-background-clip: text; background-clip: text; color: transparent; } }}index.html 复制<h1 class="hdr-text">比白色更亮</h1>可 [下载色块](/hero/white-7.5x.jpg)（white - 7.5x.jpg，1.3 KB），或者自己制作不同亮度的色块。该工具由 Chris Bennett 制作，图片在内存中处理，不会被存储，可查看 [编码器状态](/api/health)。
