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

时间:2012-01-11 00:18:23

标签: css rgb srgb

概述

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

详情

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

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

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

答案格式

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

1 个答案:

答案 0 :(得分:1)

以下是我们如何确保Photoshop中的色彩一致性:正确的色彩选择和保存的网络图像的一致性。

设置Photoshop色彩空间

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

  • 转到Windows中的Edit > Color SettingsShift + Command + KShift + Control + K
  • Settings下拉菜单中选择North America Web/Internet
  • 点击OK
  • 提交您的更改
  • 转到View > Proof Setup并选择Internet Standard RGB (sRGB)
  • 在Windows中点击Command + YControl + Y以启用Proof Colors,您也可以转到View > Proof Colors

导出(保存为Web)

  • 通过Save for Web导出时,请确保选中Convert to sRGB

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