作者：未知
原始链接：Web颜色仍然坏了
翻译：Yodonicc
“计算机颜色被破坏了”本文今天（2022）在7年后发表，互联网上的颜色仍然是错误的。扭曲现象包括颜色，透明度和变焦比，并且图像，CSS，SVG中有失真。
正确介绍三种原色之间的梯度
物理上正确的颜色梯度（例如，您将在颜色的部分中获得所需的东西），这在中点周围也很明亮，代表了两种颜色之间的平均值。1正确的渲染可以将中间变成浑浊的深色。
还有其他方法以微妙的方式使用，这对于设计非常有用，但是浏览器的不正确方法适得其反。
CSS梯度
SVG梯度
绿色和白色25％不透明，黑色为75％不透明
鲜艳的颜色叠加到透明度的25％，这应该是纠正潜在的黑暗区域，并像投影屏幕上的照明一样将它们清洗。截图可能会导致过度对比度，就像我们刚刚提高了相机的曝光率一样或坚持非亮滤波器。
75％的黑色不应完全被明亮的区域或黑色覆盖。
我们有理由需要不同的效果。这就是为什么我们拥有混合模式，但是这些都是明确的设计选择。透明度混合需要像在此示例中一样工作，以便字体和形状等事物可以正常工作并看起来正确，并且具有一致的重量和平稳的边缘背景颜色。
PNG的透明度
CSS RGBA（）背景
CSS不透明
SVG填充不透明
通过两个步骤缩小的测试图像
灰色块的外部和内部应具有相同的整体亮度，因为它们都以平均亮度为一半的白色亮度发出光。不正确的渲染可以使外部部分变暗。
图像应在收缩的小时内保持相同的整体亮度。不可正确的渲染使最小的图像太黑了。
如果您具有HIDPI显示屏或正在使用Zoom函数，则浏览器已被缩放（不正确），并且完整尺寸的图像看起来会有问题。
CSS背景图像
CSS转换
SVG图像
网络上的几乎所有颜色（从普通PNG文件到CSS和SVG中的十六进制值的数据）并不代表实际的颜色强度，而是使用“ 8-bit Srgb”伤害压缩算法。大多数人称其为“颜色空间”“但其主要目的是使用较少的位来表示颜色数据，如果您存储了与光强度相对应的实际数字亮度值，则需要更少的咬合才能达到一点。质量保证。因此，将其视为一个损失压缩技术更有用。
不幸的是，通过称其为“颜色空间”，我们误导了绝大多数开发人员，以便他们相信您可以计算SRGB颜色，并且通过向用户显示原始的SRGB号码，我们也误导了他们，这些数字认为这些数字认为这些数字已经有一个合理的含义。就像您一样，您无法在没有解压缩的情况下混合两个MP3文件的位，并期望将两个声音正确混合在一起。Color.color.con.even，每个主浏览器都完成了。
处理SRGB数据的正确方法是首先将其转换为线性RGB值，然后对其进行处理。如有必要，然后将其转换回SRGB。如果您直接对SRGB颜色数据执行任何数学操作，则您的代码将被破坏。请不要执行此操作。它是2022，现在是时候使计算机图形正常工作了。
有一个SVG属性可以解决此问题，此页面正在尝试使用它。不幸的是，尚无浏览器实施。该属性在2003年首次在SVG 1.1中指定。当浏览器鄙视正确的颜色混合时。
值得注意的是，GPU制造商和大多数游戏开发人员长期以来都对此有所思考，因为真实的环境需要线性处理，尤其是复杂的效果。当加载和渲染图像时，现代GPU可以从/到SRGB，而不会丢失任何性能。使用损坏的设计工具的设计师发现，在正确实现的游戏引擎中，情况看起来有所不同，这最终会引起痛苦。
在GIMP 2.10.30中创建的参考图像（这是可以真正执行正确和渐变的少数开源图像编辑应用程序之一）。GIMP2.10是最早在2018年最早进行此正确的版本。
注意：特别感谢技术指导Dazhao（Zhao da）回顾了本文的翻译。