HN Weekly 中文
← #807

让你的 logo 在 HDR 屏幕上格外明亮

查看原文 HN 讨论

文章摘要

soverybright.com 是 Chris Bennett 做的一个单页浏览器工具，功能一句话说完：上传一张 logo，选择哪些颜色应该发光，下载一张 HDR JPEG。在 HDR 屏幕上，被选中的部分最亮可以达到纯白 #FFFFFF 的 7.5 倍（+2.9 档曝光，约 1,500 nits）；在其他任何地方，它就是一张再普通不过的 JPEG。整个处理在浏览器内存里完成，不上传、不存储、不需要注册。

作者在 HN 的自述里讲了缘起：他注意到 LinkedIn 上某些公司的 logo 明显比周围一切都更白更亮，查下去发现做法是给已有的 JPEG 加一层 gain map（增益图），只在较新的 MacBook Pro 这类 HDR 屏幕上可见。他发现 LinkedIn 是唯一一个不会把这层信息剥掉的社交网络（当然你自己的站点上随便用），于是用 Claude Code 把它做成了这个小工具。

技术原理分两条路。给 Web 用的是 ISO 21496-1 gain map：JPEG 本身还是普通 JPEG，底层像素完全没动，只是额外附上一张很小的灰度图，告诉支持 HDR 的软件「每个像素最多可以亮到什么程度」。给 LinkedIn 用的则是把像素直接写成 BT.2100 PQ 并配上对应的 ICC profile——LinkedIn 会保留这套信息。页面上有一组对照演示：两个完全相同的 #FFFFFF 方块，其中一个带 gain map，在 HDR 屏幕上肉眼可见地一个是「屏幕正常能达到的最白」，另一个是「+2.9 档，最高 7.5 倍」。还有三个可拖动对比滑块的示例：黑底白字的字标（whites 自动选中）、白色圆环加一个品牌蓝的 orbit mark（白色和蓝色一起推到同一峰值）、深青底奶油色字的贴纸徽章（不是纯白，所以按颜色挑选）。

什么最适合发光：深色背景上浅色、接近白色的元素。作者给的实测甜点是 +2.9 档 / 约 1,500 nits。深色本身没法真正「发光」——强推的结果读起来像被冲淡的霓虹。

页面还专门有一节列了 诚实的局限：HDR 只在 HDR 显示器上、且在尊重 gain map 或 PQ profile 的软件里才会呈现（Chrome、Safari 26、Apple 照片、LinkedIn 的 App）。绝大多数其他平台会剥掉或归一化这些信息——文件在那里看起来仍然完全正常。

比较有创意的是最后一节：这招也能用在文字上。作者指出 CSS 目前没有办法写出比 #FFFFFF 更亮的颜色（CSS Color HDR 里的 HDR 色彩空间还是草案），也没有任何 filter 或混合模式能把 CSS 颜色推过白点，因为整个页面是在 SDR 里合成的——只有 HDR 内容才有那段 headroom。但你可以用 HDR 图片去「画」真实文字：background-clip: text 把字形变成一扇窗，透出下面那张 gain map JPEG。页面顶部的大标题就是这么做的——选中它，它是真的文字。所用的色板是一张 64×64 的白色 JPEG，带一张均匀的 gain map（7.5 倍、+2.9 档、约 1,500 nits），只有 1.3 KB，浏览器把它缩放到字形之下。

作者给出的实现方式和几条使用纪律很值得抄走：

/* 只在 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;
    }
  }
}

HN 评论精华

这是本期最一边倒的一场讨论。85 条评论里，绝大多数是在恳求作者和所有人不要用这个东西，语气从戏谑到真实的生理不适都有。有意思的是，作者 telecuda 全程在场，态度相当坦然，还顺手给出了关掉它的方法。