5

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.

potench
  • 3,802
  • 1
  • 28
  • 39

1 Answers1

1

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:

  • Go to Edit > Color Settings or Shift + Command + K or Shift + Control + K in windows.
  • From the Settings drop down select North America Web/Internet
  • Commit your changes by hitting OK.
  • Go to View > Proof Setup and select Internet Standard RGB (sRGB)
  • Hit Command + Y or Control + Y in windows to enable Proof Colors, alternatively you can just go to View > Proof Colors

Exporting (Save for Web)

  • When exporting via Save for Web ensure that 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.

potench
  • 3,802
  • 1
  • 28
  • 39