HDR/色深测试图
HDR/色深测试图是一组在浏览器里全屏显示的平滑渐变与 HDR 高光测试图案,用来检查屏幕上的渐变有没有一条条台阶状的色带断层,对比 8bit 与高位深渐变的平滑程度,并查看屏幕能否显示比普通白色更亮的高光。网页读不到面板真实位深,结果属于目视参考;全程在浏览器本地运行、数据不上传。
请先关闭夜间模式 / 护眼模式 / True Tone / f.lux,浏览器缩放调到 100%,建议全屏观看。
从左到右是 0→255 的全程灰阶渐变,每一级都是确定的灰度值。正常时只能看到很淡、均匀的细纹;如果能看到一条条宽窄不一的台阶,或台阶偏紫、偏绿、偏粉,就是色带断层。竖屏时每级更窄,横屏或全屏看更清楚。
结果与建议
- 【灰阶渐变】还没看这张图。
- 【分段放大】还没看这张图。
- 【彩色渐变】还没看这张图。
- 【8bit 对比】还没看这张图。
- 【HDR 高光】还没看这张图。
本结果为目视自评,仅供参考;网页无法读出面板真实位深,也区分不出原生 10bit 与 8bit+FRC。
如何使用HDR/色深测试图
先关闭夜间模式、护眼模式、True Tone 与 f.lux 这类色温调节,把浏览器缩放调到 100%。
点「全屏查看」,从灰阶渐变开始自评:看渐变上有没有一条条台阶、台阶带不带颜色;左右方向键或数字键 1~5 可以切换测试图。
依次看分段放大、彩色渐变、8bit 对比与 HDR 高光四张图,在每张图下方选出你看到的结果。
打开「查看结果与建议」,按给出的排查顺序逐项改设置,改完回到对应测试图复查。
关于HDR/色深测试图的常见问题
- 色带测试里看到一条条台阶说明屏幕坏了吗
- 多数不是坏了。8bit 内容本身每通道只有 256 级,在大屏上拉开后能隐约看到很淡、均匀的细纹属于正常;明显、宽窄不一的台阶,最常见的原因是夜间模式或护眼模式这类色温调节、系统加载的校色配置文件、广色域屏的色域映射,以及 Windows 打开 HDR 后显示 SDR 内容。按结果卡给出的顺序逐项关掉再复查,只有排除这些设置后仍然很明显,才需要怀疑面板本身。
- 怎么判断显示器是不是10bit
- 网页只能间接参考。本页信息卡里的 screen.colorDepth 是浏览器报告值,多数环境恒为 24,即使是 10bit 屏也一样;8bit 对比图里高精度行明显比 8bit 行平滑,只能说明显示链路传过了多于 8bit 的信息或做了抖动,区分不出原生 10bit 与 8bit+FRC。要确认还得查显示器规格书里的面板位深,并在显卡控制面板把输出颜色深度设为 10bpc,用 DP 或 HDMI 2.0 以上的线材连接。
- 6bit+FRC屏幕做渐变断层测试有什么区别
- 6bit+FRC 面板每通道原生只有 64 级,靠快速交替相邻两级来模拟 256 级,在灰阶渐变上常能看到比 8bit 屏更宽的台阶,暗部还可能有轻微闪动或颗粒感。分段放大图的暗部行也更容易出现相邻条带分不开。不过网页无法直接读出面板位深,台阶明显也可能来自色温调节或校色配置,先排除设置因素再下结论。
- HDR 测试图里高光块和白色一样亮怎么办
- 先确认三件事:Windows 要在「显示设置」里打开「使用 HDR」,macOS 要用支持 HDR 的内建屏或外接屏;浏览器要用新版 Chrome、Edge 或 Safari,并且本页信息卡里「HDR 扩展输出」显示支持;屏幕本身要有比 SDR 白更高的亮度余量。三者都满足仍然一样亮,多半是屏幕的 HDR 余量很小,或系统把 SDR 内容亮度滑块调到了最高,把余量占满了。
- 为什么HDR/色深测试图在手机上看起来很平滑
- 手机与苹果设备的系统层会对多数内容做空间或时间抖动,再加上像素密度高、每一级只占很窄的几列,灰阶渐变看起来往往全程平滑,这是正常现象。可以看 8bit 对比图的第 1 行:那一行的像素值是逐级硬写的 8bit 台阶,系统抖动不会把相同像素值变得不同,仍应能数出台阶;如果连这一行也看不出台阶,说明屏幕或系统在做抖动。
- 渐变断层测试暗部全黑是什么原因
- 分段放大图的暗部行开头几条全黑分不开,头号原因是 RGB 范围不匹配:显卡按「完全 0-255」输出,而显示器按「有限 16-235」解读,0 到 16 级被截成全黑、235 到 255 级被截成全白。到显卡控制面板与显示器菜单把输出动态范围、RGB 范围或 HDMI 黑电平两边设成一致即可。OLED 屏的近黑处理也会让最暗的 0 到 3 级接近全黑,这属于常见现象。
- HDR/色深测试图会上传数据或需要安装软件吗
- 都不需要。所有渐变与高光块都由浏览器本地绘制,你的自评只在当前页面里用来生成结果与建议,数据不上传,也不会保存;只有上次看的测试图这一项偏好存在本机浏览器里。打开网页就能用,不用下载软件或安装驱动,电脑、平板和手机浏览器都可以,免费无需注册。
HDR/色深测试图的五张图怎么看
五张图各回答一个问题:灰阶渐变看全程有没有色带断层,分段放大看暗部、中间调、亮部的色阶有没有被压缩,彩色渐变找出台阶最明显的颜色,8bit 对比看显示链路能不能传过多于 8bit 的信息,HDR 高光看屏幕有没有比普通白色更亮的余量。
| 测试图 | 回答的问题 | 理想结果 |
|---|---|---|
| 灰阶渐变 | 0→255 全程灰阶渐变上有没有明显台阶、台阶带不带颜色 | 只有很淡、均匀的细纹,无彩色条 |
| 分段放大 | 暗部 0–15、中间调 120–135、亮部 240–255 三段放大后,每段是否都有 16 条宽度均匀的条带 | 每行 16 条、等宽、亮度逐级变化,两端不被吞 |
| 彩色渐变 | 红绿蓝青品红黄六条 0→255 渐变里,哪种颜色台阶特别明显 | 六条平滑程度接近 |
| 8bit 对比 | 同一段窄区间渐变的 8bit 量化、8bit 加抖动、高精度三行,高精度行是否更平滑 | 支持高位深时第 3 行接近第 2 行的平滑度 |
| HDR 高光 | SDR 白旁边的 4 块高光能不能比它更亮、能分清几块 | HDR 开启且屏幕支持时能分清 2 块以上 |
这组图合起来就是常说的色带测试、色彩断层测试与渐变断层测试,也是屏幕色带测试、灰阶渐变测试和渐变测试图的常见做法;英文资料里叫 color banding test 或 bit depth test。HDR 高光图则相当于一张简易的 HDR 测试图,用来做屏幕 HDR 测试,英文常写 HDR test。
为什么渐变会出现色带
8bit 每通道只有 256 级,窄区间的渐变被拉宽之后,每一级都会变成一条看得见的条带,这就是色带断层。
以 1920 像素宽的屏幕为例:0→255 的全程灰阶渐变每级最宽约 8 像素,台阶很窄、不太显眼;而 8bit 对比图用的 64→80 窄区间只有 17 级,每级约 113 像素宽,台阶就很明显了。同一段区间按 10bit 等效细分是 65 级,每级约 30 像素,看起来平滑得多——这就是 8bit 10bit 测试想让你对比的东西。
夜间模式、护眼模式这类色温调节,系统加载的校色 ICC / LUT,以及广色域屏把 sRGB 内容做的色域映射,都会把 256 级再压掉一部分,于是台阶变宽、宽窄不一;6bit+FRC 面板原生只有 64 级,渐变上的台阶也往往更明显。做显示器色深测试或屏幕色深检测时,先把这些设置排除掉再下结论。
为什么本工具不用 CSS 渐变画图
浏览器会对 CSS 渐变和 canvas 渐变自动做抖动,把台阶藏起来;用它们画测试图,测到的是浏览器的抖动而不是你的屏幕。
本工具在 canvas 上按设备像素逐级填入确定的颜色值,并关闭图像平滑,所以你看到的台阶来自屏幕与显示链路本身。浏览器缩放或系统缩放不是整数倍、又拿不到精确设备像素尺寸时,舞台上方会出现黄色提示,按 Ctrl 加 0 恢复 100% 再看。8bit 对比图的第 2 行故意加了有序抖动,让你看到抖动是怎样把台阶藏起来的;第 3 行用 WebGPU 16 位浮点画布逐像素输出连续值,浏览器不支持时会直接写明原因。
RGB 范围有限与完全不匹配的表现
分段放大图暗部行开头几条全黑、亮部行末尾几条全白,头号原因是 RGB 范围设置不匹配:显卡按完全 0-255 输出,显示器却按有限 16-235 解读,两端被截断。反方向的不匹配(显卡有限、显示器完全)表现为黑色发灰、白色不够亮,各级仍分得清。
显卡控制面板与显示器菜单对 RGB 范围的叫法各不相同,常见的有「输出动态范围」「RGB 范围」「HDMI 黑电平」,把两边设成一致(电脑显示器一般都选完全 0-255)即可。改完先回到分段放大图复查,再重看灰阶渐变——范围不匹配本身就会造成台阶。黑位、白位与伽马的目视调整,可以接着用屏幕校准测试图。
网页色深测试能测什么、不能测什么
网页能看色带、能对比 8bit 与高精度渐变、能粗看 HDR 余量有无,但读不到面板真实位深,也测不出亮度。