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.
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 Settings
orShift + Command + K
orShift + Control + K
in windows.Settings
drop down selectNorth America Web/Internet
OK
.View > Proof Setup
and selectInternet Standard RGB (sRGB)
Command + Y
orControl + Y
in windows to enableProof Colors
, alternatively you can just go toView > Proof Colors
Exporting (Save for Web)
Convert to sRGB
is 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.