css - 使用 sRGB 照片和监视器 RGB 合成开发网站的颜色配置文件策略

Question

概览

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

详情

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

作为前端开发人员，我经常使用 CSS 和 HTML(无图像)重新创建组件中显示的元素，这需要我在 PSD 中的内容和渲染的内容之间正确匹配 HEX 颜色网站。因此，我更愿意使用Monitor RGB 颜色配置文件 进行标准化，这样每个人都可以使用更接近于浏览器中实际呈现的内容的内容。

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

回答格式

希望我已经正确地问了这个问题 - 合适的答案只会给出你如何处理问题的观点 - 或者(更好)如果有 SCSS sRGB() 函数或其他一些算法来转换 RGB/HEX 颜色到 sRGB，然后我将把它放入 SASS 混入中。

Answer 1

以下是我们如何确保 Photoshop 中的颜色一致性:在为 Web 保存的图像中正确的颜色选择和一致性。

设置 Photoshop 色彩空间

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

• 转到 Edit > Color Settings 或 Shift + Command + K 或 Shift + Control + K(在 Windows 中)。
• 从设置下拉菜单中选择北美网络/Internet
• 点击 OK 提交您的更改。
• 转到 View > Proof Setup 并选择 Internet Standard RGB (sRGB)
• 在 Windows 中点击 Command + Y 或 Control + Y 以启用 Proof Colors，或者您可以直接转到 View >校样颜色

导出(为 Web 保存)

• 通过“保存为网络格式”导出时，确保选中Convert to sRGB。

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