: SRGB, Photoshop and Color Picker "proofing" I have recently started with web developement and changed my Photoshops Color Profile to sRGB, in addtion I set the Proof Setup to Monitor RGB to

@Ravi4787994

There's nothing difficult or mysterious about creating colour accurate web, app or UI graphics, when you keep the facts in mind.


Macs, PCs and iOS devices have the same gamma, 2.2.
Photoshop can't save PNGs with ICC profiles.
GIFs can't contain ICC profiles.
JPEGs can contain ICC profiles, but they're ignored in some situations.
Xcode and iOS ignore ICC profiles in PNGs used for iOS UI.


But the most important thing to note is this:


Chances are you want to colours in your images to match colours in HTML, CSS, Flash, Objective-C etc.


This is only possible if Photoshop is set up to display colours without doing a profile adjustment when editing and if you disable the profile conversion on export ("Convert to sRGB").

There are some situations where you may want to use colour profiles and save an ICC profile in a JPEG that's going to be used on the web, but that's a special case, typically only for photos where accurate reproduction is required (please note that it also assumes you have a good workflow with respect to colour profiles throughout the entire process).

But, for web and UI design, matching relative colour trumps matching colour across different devices. The reason for that is simple: Relative colour differences will be immediately noticeable. The argument against using profiles is simple: PNGs and GIFs can't be saved with ICC profiles with Photoshop.

If you're converting to sRGB when you export, you're not adding some magic to the file that will make it appear the same on all computers, you're just destructively processing your images so they don't match relative to the other colours in your design.

If you're doing mobile UI design, testing your design on the device is a must though — there's too many variables, so seeing your design in situ is the best way to check everything's ok.

Also... you should be setting up your documents to 72PPI. There's multiple reasons for this.


PPI is typically ignored on the web and in app UI (it's the pixel size that counts).
Using anything other than 72PPI can give unexpected results in some situations (I can go into detail if you'd like).
If you have all your documents set to different values, dragging elements between documents can mean that layer styles get scaled, which often isn't what you want.


The comments of the Smashing Mag article hced linked to are worth a read if you're in doubt. Pretty much any related topic is covered.

Disclaimer: I'm the author of Smashing Mag article.

I'd recommend using "Don't Color Manage This Document"

I've changed my workflow a little since writing the article. I now assign "Don't Color Manage This Document" to all documents, rather than using the Monitor profile — doing so lets you move between computers with different monitor profiles without having to reassign your documents.

Vote Up Vote Down

@Yeniel278

If I understand you correctly, you have issues with the artwork not appearing in the exact same colors when exported, as they appeared inside your Photoshop project? If so, I recommend you do not use sRGB at all, especially if you're producing for the web. Also, in your Color Settings (under Edit menu), set RGB to "Monitor RGB - Display" and optionally turn Color Management Policies for RGB off (descriptions below).

To prevent color shifting when Exporting for Web

Basically this means to not color manage images at all. What you see in Photoshop is what _you_ see when it's been exported. N.B. that obviously doesn't also mean that viewers see the same colors exactly as they were intended. The representation is entirely in the hands of their monitors*, which means that this approach leaves more room for variations (which may or may not be a critical thing). If you happen to know you're solely producing for a bunch of people with crappy old CRT monitors, you should proceed with caution. One thing to be aware of, especially in such case, is also the difference in display gamma on various systems such as Macs vs. Pc's (see my previously posted links to read up on that). Anyway:

Under Edit menu, select Color Settings and choose the "Monitor RGB - Display" for RGB, and under Color Management Policies, you may also want to choose "Off", which means that Photoshop will disregard color management profiles of any new images you open (which is nice if this is what you mostly prefer, such as when producing for web).



When Exporting for Web, do NOT convert to sRGB.

Vote Up Vote Down

@Yeniel278

Perhaps these articles may be of help:

The Sad Story of PNG Gamma “Correction”

The Mysterious “Save For Web” Color Shift

Save For Web, Simply

Vote Up Vote Down