使用 sRGB 照片和显示器 RGB 比较开发网站的颜色配置文件策略
概述
我正在寻找有关标准化合成上的颜色配置文件的建议/解决方案，以便 HTML/CSS 渐变/混合的颜色与合成中实现的效果相匹配。我经常使用 sRGB 颜色配置文件 获取 PSD，因此当我选择颜色来重新创建渐变/图标/或背景时，十六进制颜色和生成的 CSS/HTML 渐变与提供的原始 sRGB 渐变不匹配比较。通常，我只是放弃嵌入的颜色配置文件，以使用 Monitor RGB 颜色配置文件，该颜色配置文件可以更好地将 PSD 颜色与最终结果 CSS 颜色匹配。下面的示例显示了颜色配置文件之间的差异。
详细信息
困境如下：设计师希望标准化 PSD 以使用嵌入的 sRGB 颜色配置文件，因为导出的图像 (JPEG / PNG) 保留该 sRGB 颜色配置文件，以便在浏览器中加载时正确显示。因此，我无法在 CSS 中重新创建的照片/纹理/内容将导出为具有更好 sRGB 配置文件的 JPEG/PNG（这是一个可以理解的请求）。
作为一名前端开发人员，我经常使用 CSS 和 HTML（无图像）重新创建在合成中显示的元素，这要求我在 PSD 中的内容和网站上呈现的内容之间正确匹配十六进制颜色。因此，我更愿意使用监视器 RGB 颜色配置文件进行标准化，以便每个人都使用更接近浏览器中实际呈现的内容。
只是好奇其他人如何解决这个问题？在很多情况下，我使用 CSS 和 PNG 的混合来实现效果（尤其是需要动态更改的效果（大小/色调/阴影...），因此使用 sRGB 导出图像并用 CSS 渐变/阴影覆盖它最终结果是 sRGB / 显示器 RBG 的混合，因此与 comp 略有不同
答案格式
希望我正确地提出了这个问题 - 合适的答案只会给出你如何处理问题的观点 - 或者。 （更好）如果有 SCSS sRGB() 函数或其他算法将 RGB / HEX 颜色转换为 sRGB，那么我会将其放入 SASS mixin 中。
Overview
I'm looking for advice / solutions on standardizing color profiles on comps so colors of HTML/CSS gradients/blends match effects achieved in a comp. I often get PSDs using the sRGB color profile so when I color pick something to recreate a gradient / icon / or background the HEX color and resulting CSS/HTML gradient does not match the original sRGB gradient provided in the comp. Typically I just discard the embedded color profile for a Monitor RGB color profile that better matches PSD colors to end result CSS colors. Here's an example showing differences between color profiles.
Details
So here's the predicament: A designer wants to standardize PSDs to use an embedded sRGB color profile because exported images (JPEG / PNG) retain that sRGB color profile to display correctly when loaded in a browser. So photos / textures / things that I can't recreate in CSS will export as JPEG/PNG with the better sRGB profile (which is an understandable request).
As a front-end developer I often recreate elements displayed in a comp using CSS and HTML (no images) and this requires me to match HEX colors properly between what's in the PSD and what's rendered on the website. So, I would prefer to standardize with a Monitor RGB color profile so that everyone uses something closer to what's actually rendered in the browser.
Just curious how everyone else approaches this problem? There's often cases where I use a mixture of CSS and PNGs to achieve an effect (especially effects that need to change dynamically (size/hue/shading...) so exporting an image with sRGB and overlaying it with CSS gradients / shadows ends up being a mixture of sRGB / Monitor RBG and hence subtly different from the comp.
Answer Format
Hopefully I've properly asked this question - suitable answers would just give a perspective on how you deal with the problem - OR (better) if theres an SCSS sRGB() function or some other algorithm to convert an RGB / HEX color to sRGB then I will throw it into a SASS mixin.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
以下是我们确保 Photoshop 中颜色一致性的方法：正确的颜色选取和保存为 Web 的图像的一致性。
设置 Photoshop 色彩空间
我们要做的第一件事是确保我们在正确的颜色配置文件下工作。为此，请按照下列步骤操作：
Edit > Windows 中的颜色设置或Shift + Command + K或Shift + Control + K。设置下拉列表中选择北美网络/互联网确定提交更改。查看>校样设置并选择Internet Standard RGB (sRGB)Command + Y或Control + Y以启用校样颜色，或者您也可以直接转到查看>校样颜色导出（另存为 Web）
转换为 sRGB。您已完成，现在您应该可以享受所有文件和 HTML 中的颜色准确性，并且将确保图像在设备和浏览器中一致显示。
Here's how we ensure color consistency in Photoshop: correct color-picking and consistency in saved-for-web images.
Setting Up Photoshop Color Space
The first thing we all have to do is to ensure we are working under the correct color profiles. To do this follow these steps:
Edit > Color SettingsorShift + Command + KorShift + Control + Kin windows.Settingsdrop down selectNorth America Web/InternetOK.View > Proof Setupand selectInternet Standard RGB (sRGB)Command + YorControl + Yin windows to enableProof Colors, alternatively you can just go toView > Proof ColorsExporting (Save for Web)
Convert to sRGBis checked.You are done, you should now enjoy color accuracy across all of your files and in HTML and images will be ensured to display consistently across devices and browsers.