Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Color management in mobile frontend-design

Tuesday, December 10th, 2013 by Servage

There are many practical issues for web designers related to color management; particularly in matching colors in images to colors generated by HTML, CSS or other code. This happens frequently when we are using Photoshop-like graphic design software. The obvious reason is that Photoshop uses different color parameters that are generally restricted to its working windows and saved files. Plus colors are different from browsers and operating systems’ color management tools.

Differences in Color Management

Different operating system have different ways to manage colors. Gamma values differ between Mac OS and Windows. Likewise, there is a visible difference for iOS and Android devices, where you are creating for responsive web designs. Browsers have their own set of color management and they rely on HTML, CSS, JavaScript, Objective C, Java code, where we feed the color values during coding. Therefore, modern web designers have to now walk a tightrope in order to manage color consistency between images, device OS and their browsers.

Hence, I will briefly discuss some color related issues that come up during our web development. Here, our goal is to manage the shift or appearance of colors throughout the web experience irrespective of platform, device and browser.

The fundamental problem is the working windows of Photoshop, which displays color according to the profile that is setup prior to image creation along with the influence of operating system. The difference between a default Photoshop window and the web is in the treatment Photoshop gives to its images and saved documents.

How to Manage Colors in Photoshop

Our first priority is to manage colors in our web development project, where the obstacle is a difference between the OS (Windows or Mac OS) and Photoshop color management. Therefore, we have to follow the traditional wisdom here and disable Photoshop’s RGB color management in each document; instead of, changing the color management of the OS, so we can match the colors of monitors with the colors saved in Photoshop images.

This step is easy and we do that by changing the color setting of a Photoshop document by choosing: Edit and Color Settings. We have to set the working space for RGB to the option: Monitor RGB, while setting color management policies to Off for RGB. Then in advance setting, you need to turn off: Blend Text Colors Using Gamma, if you are operating Photoshop CS6 and above. This way you will manage how non-opaque texts are rendering.

Assign Profile

Next, you have to take a big leap and change the setting for: Assign Profile, by selecting it from the Edit menu of Photoshop. Here you need to set the radio button to On, against the: Don’t Color Manage This Document. When finished, don’t forget to turn off: Proof Colors, in the View menu. Finally, you have to save the file using the Save For Web option and take further precautions by turning off the Convert to sRGB button, when you are saving a JPEG file. In addition, turn off the Embed Color Profile option there.

Assign Profile Vs. Convert to Profile

One thing to note is that I mentioned Assign Profile above, and not the Convert to Profile option; because there is a big difference between the two. For instance, if you choose the Assign Profile option for your Photoshop document, that simply will change the profile in the document, without touching the saved color data in the output document. Thus, if you assign a new profile, your document will appear different on screen, but its color data won’t retain any changes. You will realize this when you open that document on another screen with a different operating system.

References & More Reading

Colour management and UI design
Text in Photoshop CS6

Color management in mobile frontend-design, 4.7 out of 5 based on 3 ratings
Categories: Guides & Tutorials
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.