为什么在将图像导出为 jpg 时无法获得完全相同的颜色

Question

我有一个 Illustrator、一个 PNG 图像和一个 SVG 文件，其中的框填充了 #041C2C 颜色（深蓝色）。当我尝试将这些文件中的任何一个导出为 jpg 时，图像结果会稍微改变红色值并将颜色更改为 #051c2c.

我使用的 Illustrator、Photoshop、Sketch 和 InVision Studio 具有不同的导出设置。我也试过 online jpg generator 但下载的图像在我打开时总是显示错误的颜色。在 Photoshop 中，我尝试使用颜色配置文件，但没有任何好反应。

你们中的任何人都可以复制我所做的但获得正确的颜色吗？

有没有办法得到原来的颜色？

Answer 1

您面临几个问题。一是PNG中使用的RBG颜色space和JPEG中使用的YCbCr颜色space不具有相同的色域。如果您将 RBG 颜色 space 表示为图形，您将得到一个可以表示的颜色立方体。如果覆盖 YCbCr 颜色 space，您会得到另一个顶点位于 (0,0,0) 的立方体，但立方体已旋转。

当您进行 RBG 到 YCbCr 的转换时，YCbCr 框外的值会被限制以适合框内。

另一个是 JPEG 过程使用浮点运算，导致四舍五入。

另一个是量化。您可以通过在量化能力中使用全 1（并获得较差的压缩）来避免这种情况。

Answer 2

JPEG 格式无法存储这种颜色。

对于#041c2c颜色，对应的(R,G,B)值为(4,28,44)。对于#051c2c颜色，对应的(R,G,B)值为(5,28,44).

根据JFIF standard，YCbCr 颜色（每个分量有 256 个级别）可以直接从满量程 8 位每个颜色通道 RGB 颜色计算如下：

Y  = Min(Max(0, Round(  0.299*R + 0.587*G + 0.114*B)), 255)                = Min(Max(0, Round(22.648)), 255)        = 23
Cb = Min(Max(0, Round((-0.299*R - 0.587*G + 0.886*B) / 1.772 + 128)), 255) = Min(Max(0, Round(140.0496614)), 255)   = 140
Cr = Min(Max(0, Round(( 0.701*R - 0.587*G - 0.114*B) / 1.402 + 128)), 255) = Min(Max(0, Round(114.699001427)), 255) = 115

所以 (Y, Cb, Cr) 三元组是 (23, 140, 115)。

从 YCbCr 颜色计算满量程 8 位每个颜色通道 RGB 值的反比关系（每个组件有 256 个级别）可以计算如下：

R = Min(Max(0, Round(Y + 1.402 * (Cr - 128))), 255) = Min(Max(0, Round(4.774)), 255) = 5
G = Min(Max(0, Round(Y - (0.114 * 1.772 * (Cb - 128) + 0.299 * 1.402 * (Cr - 128)) / 0.587)), 255) = Min(Max(0, Round(28.1541362862)), 255) = 28
B = Min(Max(0, Round(Y + 1.772 * (Cb - 128))), 255) = Min(Max(0, Round(44.264)), 255) = 44

如您所见，(R, G, B) 值为 (5, 28, 44)。

没有 YCbCr 值的组合导致输出上的 (4, 28, 44)。

为什么在将图像导出为 jpg 时无法获得完全相同的颜色

Why I can't get the exact same color when exporting an image to jpg

photoshop

jpeg

export

colors