0 Replies Latest reply on Jun 19, 2014 1:35 PM by viveredesign

    Mixing CSS colors and image files from Photoshop for web

    viveredesign Level 1



      I recently encountered a web production color issue and wanted to collaborate with other web producers to either inform or to see if there isn't a better work-around....


      A web site design has a particular color palette and some elements are converted to HTML/CSS colors (rgb hex values) and other elements must be saved as images--both with the same exact color appearance. We graphics professionals know that generally all images should have the color profile indicated (embedded, tagged) in the image file (e.g., sRGB, Adobe RGB or whatever) in our color-managed workflow so that the color numbers have meaning. For web, I've always used sRGB (the web standard) and tagged the images with the sRGB color profile.


      Historically, this probably hasn't mattered because no web browser cared about the image profiles anyway. However, recently, some browsers have started to implement color-management. This is good for pictures and such, but poses a problem for web graphic elements: the images are rendered in the color-managed sRGB, yet the CSS is still rendered outside of color-management (the so-called monitor or "device" profile?). Therefore, if a web page design's color palette is to be honored, the HTML/CSS hex colors must appear the same as the matching hex colors embedded in the images. However, modern browsers now render the colors in the color-profile-tagged/embedded images differently, so the colors on the rendered pages no longer match!


      My work around has been to NOT tag (embed) the web-element image files with any color profile and thus cause the modern browsers to do what they used to: render the images without a color profile just like they render HTML/CSS hex colors. Perhaps in the future, there will be an HTML specification to inform the web browser to render all colors (HTML/CSS/images) in a particular color profile. (In my cursory testing, I've found that current Safari and Chrome for Windows 7 do alter the tagged-image appearances, yet Safari in iOS does not.)


      Have other web producers run in to this issue and are there more eloquent work-arounds?