七色堂七色色块围合标志七色堂观察色彩 · 动手创作

COLOR NOTES / 渐变计算

七色堂黑白渐变中点为何有两种灰

七色堂制作黑白渐变时,相同端点和相同50%位置也可能得到不同中点。若直接平均sRGB编码值,8位表示约为128;若在线性光中取一半再编码回sRGB,约为188。差别在插值所用的数值空间,不必是色标被拖错,也不能据此说某个灰一定“更正确”。

编写:2026-11-03 · 本文仅计算不透明、标准sRGB黑与白之间的两个明确方案。8位值按四舍五入显示;不讨论其他色域、透明度混合、印刷或设备校准,也不把线性光一半等同主观亮度一半。

七色堂同端点同位置两种黑白渐变示意:sRGB编码中点128,线性光插值再编码中点188
原创计算图。两条同样长、同端点、同50%位置,差别仅为所指插值空间;不是显示器校准图。 本站原创解释性SVG;图中场景与数值为明确设定的教学示例。

先给一个直接回答

七色堂制作黑白渐变时,相同端点和相同50%位置也可能得到不同中点。若直接平均sRGB编码值,8位表示约为128;若在线性光中取一半再编码回sRGB,约为188。差别在插值所用的数值空间,不必是色标被拖错,也不能据此说某个灰一定“更正确”。

把端点、位置和计算空间分开记录

给定黑色为sRGB三通道(0,0,0),白色为(1,1,1),两端分别位于0%与100%。这次只查看正中间50%位置,不移动色标,也不加入第三种颜色。把这些条件固定后,才能比较插值空间造成的差异。

色标位置回答在哪里,色彩空间回答用哪套数值坐标计算。它们不是同一个控制项。若同时改位置和空间,即使灰度变化,也无法把变化单独归因于某个因素。

方案一:在sRGB编码值中直接取中间

三个通道都从0走到1,因此编码值中点是(0+1)/2=0.5。用0至255的8位表示就是0.5×255=127.5,本页按四舍五入记成128,即#808080。三通道值相同,所以仍然是中性灰。

这一步平均的是编码值,并没有先把它换为线性光量。因而不能把128直接说成白色光量的一半。这里的“中间”指这个坐标上的中间,不能省略坐标名。

方案二:在线性光中取中间,再转回显示编码

黑白端点在线性光坐标上仍为0与1,其中点是0.5。按W3C列出的sRGB转换关系,这个正值使用1.055×0.5^(1/2.4)-0.055,约为0.735357;再乘255得约187.516,四舍五入为188,即#bcbcbc。

0.5是线性光坐标,0.735357是对应的sRGB编码坐标,两者描述本方案同一个中点的不同表示。不要再对0.735357做一次同样的编码,否则会重复转换。图中两条渐变都最终用sRGB数值展示。

两个结果不同,不代表端点或色标位置不同

两条带的最左仍是黑,最右仍是白,中点竖线也在同一位置。上条按编码值计算,下条按线性光计算后编码。中点128和188的对照,来自计算路线,而不是把一条渐变偷偷截短。

W3C区分不同插值空间的用途,线性光空间适合表达光强线性组合;这不意味着所有界面渐变都必须选它。追求感知均匀还有其他空间与条件,本题不把两种方案强行排名。

复现时怎样避免把截图差异混进计算

在工作记录中保存端点、色标位置、插值空间、透明度和最终显示编码。实际软件若未显示所用空间,先查文档或导出可读参数,不能凭视觉猜它一定采用某种默认值。不同工具的默认行为也不应从本例推定。

要核算本题,直接复算两个数值路线即可。截图像素还可能受缩放、压缩、色彩管理和取样位置影响,不能把任何截图中取到的127或189都立即判作公式错误。若用本图作教学,数值标签是给定计算结果,屏幕观感不是校准测量。

按这四步完成检查

  1. 固定黑白端点、0%与100%色标位置,以及不透明条件。
  2. 写明使用sRGB编码值插值还是线性光插值,不只记“默认渐变”。
  3. 分别算中点;线性光结果只编码回sRGB一次,再按约定取整。
  4. 保存数值与空间说明,复查时不把截图取样误差或主观观感当成公式。

常见问答

128与188哪一个才是50%中点?

在本题中两者都位于渐变长度的50%,但计算空间不同:128来自编码值插值,188来自线性光插值后编码。

188表示亮度一定是128的188/128倍吗?

不能直接用编码值比值推断光量或主观亮度比,必须区分编码关系与具体观察条件。

改变插值空间就等于移动色标吗?

不是。图中位置完全相同,变化的是颜色数值怎样在端点之间计算。

所有软件默认都会算出128吗?

不能这样推断。应核对软件与具体功能所用的插值空间,本文只比较两个明确指定的方案。

参考资料

下列资料支持文中的标准说明;站内色卡、版式与练习为七色堂原创示例。

接着做一个练习