Color Shift Between Photoshop and The Real World, A.K.A. Online

This post may contain affiliate links. As an Amazon Associate I also earn from qualifying Amazon purchases at no cost to you. Full disclosure here.

As designers, we’ve all been there, we build a comp in Photoshop were incredibly happy with that we’ve spent a good amount of time color proofing only to save it as a JPG, open it in our browser and it looks dull and washed out. It gets even more complicated when you’re working with another designer and you’re both getting completely different colors and can’t agree on which is right.

The solution is frustratingly easy and will help you gain back countless hours of frustration and anguish. Not to mention, it’s also much easier and better than simply turning off any color management in Photoshop, crossing your fingers, and hoping for the best.

The Simple Solution

Photoshop comes with color settings for most anything need you could throw at it, so there’s no complicated color management settings you need to dial in and save. Using this quick guide, you’ll have your working space fixed in less than a minute. Here are the three steps you need to follow to get consistent colors across your programs.

Step 1

First we need to choose our color settings. Go to your menu bar and click on Edit -> Color Settings.

Edit, Color Settings in Photoshop
Edit, Color Settings in Photoshop

When this window comes up, you’ll be greeted with a slew of options. Don’t worry, most of them we won’t touch and the most important one is right up top. Under “Working Spaces” you’ll see a drop down-box for RGB profiles, select the sRGB IEC61966-2.1profile. Under “Color Management Policies” make sure the RGB drop -down saysConvert to Working RGB, then hit OK.

Color Settings in Photoshop
Color Settings in Photoshop

Step 2

Now go to back to your menu bar and click on View, and select Monitor RGB. That will make sure Photoshop is displaying your work using the color profile we selected earlier. If you have a document you’re working on open, you’ll notice a slight color shift.

View, Monitor RGB in Photoshop
View, Monitor RGB in Photoshop

Step 3

Now click on View again in your menu bar and make sure Proof Colors has a check mark next to it. If not, click on it and you’re done!

View menu bar in Photoshop
View menu bar in Photoshop

There you have it! Just imagine, all your frustration was a few short clicks away from being solved. Of course, even with these color settings correctly implemented, there will inevitably be some inconsistencies across different devices, monitors and programs. Much of this you can’t help, but for the sake of having a working file that displays almost exactly what you’ll be seeing online, this fits our needs well.

I’ve created template files for starting my websites each with the sizes of the image, the guides in the right place for a variety of styles and sizes of websites, and my color settings all correct. I will post how I created my template files in another post soon, but in the meantime enjoy your correct colors!

Share:

Facebook
Twitter
Pinterest
LinkedIn

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More Good Reads

Related Posts

person in long sleeve shirt holding a calculator

What is the Easiest Bookkeeping Method for Small Business?

As a small business owner, keeping track of your finances doesn’t have to be complicated. The easiest bookkeeping method for small businesses is using a simple spreadsheet to record income and expenses. This straightforward cash basis method can save you time and headaches compared to traditional accounting. Why Use a Spreadsheet? Spreadsheets are easy to

two women sitting in front of computer monitor

Whale Hunting – The Risk of Having One Major Client

In 2012 we shut down our startup. It was devastating and emotionally draining. Walking away from something you’ve put your blood sweat and tears into is a gut wrenching experience. Fortunately we had a team with a skillset so we pivoted to being a software consulting business. Hooray, we’re saved! Very quickly we signed a

selective focus photography of hustle and bust text

Business Name Brainstorming – How-to Guide

If the idea of finding the right name for your business fills you with anxiety, you’re not alone. Business name brainstorming can be really challenging. Fortunately, there’s a formula that makes it easier. In my years as an entrepreneur, I’ve come up with at least a dozen brand names for companies I’ve started or co-founded,