Avoid Colour Shift When Saving for Web in Photoshop

Question for you; Have you ever completed a website concept in Photoshop only to have the exported image colours shift on you? The HEX and RGB values are all exactly the same, but the image appearance is completely different? I’ve been designing websites for over 10 years now and I’m still guilty of doing this the odd time, just ask @kevindoherty40. But if you check that your settings are correct before you start your design, you will be sure to avoid the looks of frustration you’ve been getting from the developer 🙂

Colour Modes

CMYK is for print and RGB is for the web, but you knew that already, right? In Photoshop, you have the option to select the colour profile you want to work in, but by default, the colour profile in Photoshop is not set to a web profile and this is what is causing your colour shift. So let’s set up the correct colour profile.

Set Up Your Colour Profile

Ok, here’s how to ensure to set your Photoshop document up for your website concept, so you don’t have to receive those off looks going forward.

From the Photoshop View menu, turn on Proof Colors…

Then from the View menu again, choose Proof Setup and then Monitor RGB

Now that you’ve setup your colour profile. Your exported images won’t look like a lighter version of the colour than in your PSD. Check out the difference below.

Now that you know how to setup your web colour profile, you’ll ensure yourself that you won’t run into any crazy colour issues once the images are exported. Just remember to double check your PSD before starting your design to make sure the proper profile is set.

If you have any questions or want to talk web design, feel free to reach out to me, dkramer@nvisionsolutions.ca.

Happy concepting!