用于使用sRGB照片和监视器RGB组件开发网站的颜色配置文件策略

Question

概观

我正在寻找关于在comps上标准化颜色配置文件的建议/解决方案,因此HTML/CSS渐变/混合匹配效果在comp中实现.我经常使用sRGB颜色配置文件获取PSD,所以当我选择颜色来重新创建渐变/图标/或背景时,HEX颜色和生成的CSS/HTML渐变与comp中提供的原始sRGB渐变不匹配.通常我只是丢弃Monitor RGB颜色配置文件的嵌入颜色配置文件,以便更好地匹配PSD颜色和最终结果CSS颜色.这是一个显示颜色配置文件之间差异的示例.

细节

所以这就是困境:设计师想要将PSD标准化以使用嵌入式sRGB颜色配置文件,因为导出的图像(JPEG/PNG)保留了sRGB颜色配置文件,以便在浏览器中加载时正确显示.因此,我无法在CSS中重新创建的照片/纹理/事物将导出为具有更好的sRGB配置文件的JPEG/PNG(这是一个可以理解的请求).

作为一名前端开发人员,我经常使用CSS和HTML(无图像)重新创建 comp中显示的元素,这要求我在PSD中的内容和网站上呈现的内容之间正确匹配HEX颜色.因此,我更倾向于使用Monitor RGB颜色配置文件进行标准化,以便每个人都使用更接近浏览器中实际呈现的内容.

只是好奇其他人如何解决这个问题？通常情况下我会使用CSS和PNG的混合来实现效果(特别是需要动态更改的效果(大小/色调/阴影...),因此使用sRGB导出图像并使用CSS渐变/阴影覆盖图像会结束是sRGB/Monitor RBG的混合物,因此与comp略有不同.

答案格式

希望我已经正确地提出了这个问题 - 合适的答案只是给出了如何处理问题的观点 - 或者(更好)如果有SCSS sRGB()函数或其他算法将RGB/HEX颜色转换为sRGB然后我会把它扔进SASS mixin.

Answer 1

以下是我们确保 Photoshop 中颜色一致性的方法：正确的颜色选取和保存为 Web 的图像的一致性。

设置 Photoshop 色彩空间

我们要做的第一件事就是确保我们在正确的颜色配置文件下工作。为此，请按照下列步骤操作：

• 转到Edit > Color Settings或Shift + Command + K或Shift + Control + K在窗口中。
• 从Settings下拉列表中选择North America Web/Internet
• 通过点击 来提交您的更改OK。
• 前往View > Proof Setup并选择Internet Standard RGB (sRGB)
• 在 Windows 中点击Command + Y或来启用，或者您也可以直接访问Control + YProof ColorsView > Proof Colors

导出（保存为网页）

• 通过“保存为网页”导出时，请确保Convert to sRGB选中该选项。

您已完成，现在您应该可以享受所有文件和 HTML 中的颜色准确性，并且将确保图像在设备和浏览器中一致显示。