让标志和文字比白色更耀眼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 “画布”一张纯白色增益图 JPEG1.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 classhdr-text比白色更亮/h1可 [下载色块](/hero/white-7.5x.jpg)white - 7.5x.jpg1.3 KB或者自己制作不同亮度的色块。该工具由 Chris Bennett 制作图片在内存中处理不会被存储可查看 [编码器状态](/api/health)。 HDR JPEG 工具：让标志和文字亮度最高提升 7.5 倍，效果超耀眼！
让标志和文字比白色更耀眼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 “画布”一张纯白色增益图 JPEG1.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 classhdr-text比白色更亮/h1可 [下载色块](/hero/white-7.5x.jpg)white - 7.5x.jpg1.3 KB或者自己制作不同亮度的色块。该工具由 Chris Bennett 制作图片在内存中处理不会被存储可查看 [编码器状态](/api/health)。