Are You Using Correct Color Codes? Probably Not — And Here's Why

When using a color on a website or app, you might think about HEX codes and RGB(A) values. You try to perfectly match the colors originally used in the design. Your designer might give you a roundhouse-kick if they don't. Since this can be tricky, I'm going to discuss some of the problems and tricks to help you achieve your goal.

Does it Matter?

Actually — not really in most cases. Nobody will notice the difference between #ffc600 or #ffc601, right? But for many designers, that's just not correct, technically, and the difference can be a lot more. So, when we introduced the color picker in Frontify, some people told us, that we're showing the wrong colors in the color picker, because they saw that it's not the exact same code as they see in Photoshop. We told them to double-check their Photoshop color management and export settings. In all cases, there was something wrong. Before we jump into those settings, I want to talk about color picking.

How To Extract Color Codes

What are you doing to get information about a color from a design? Are you picking it? Are you using the Photoshop color picker, an OSX app or do you get it from written documentation, like a wiki or style guide? Either way, the color you've used might be wrong, at least theoretically. Let me tell you why.

Why Color Pickers Are Tricky

There are quadrillions of color pickers out there, they do their job for most of the people and where they don't, nobody cares... Most of them just pick the color on the screen while respecting the color profile of your display. This leads to different results on other displays or other color profiles. Have a look at this example from ColorSnapper on a Retina Mac. On the left, I've used the Standard Color Profile and on the right, I've used the same image, but configured my display to use the Apple RGB color profile.

As you can see, the picked color is very different to the original one, it really depends which display color profile you use. There are also color pickers who allow you to customize the color profile and native modes, they might be a better fit for the job. But anyway, it's tricky to get it right.

Picking From Photoshop is Fine, if...

... you disable color management for RGB files. If it's not disabled, one might get the wrong color codes. But this is easy to fix, you can either disable it in the settings (Edit → Color Settings, set working space for RGB to Monitor RGB ) or you can disable it for the current document after opening a PSD (Open Edit → Assign Profile and choose Don't color manage this document).

Picking Colors in Frontify or a Browser

If you're using PNGs as a source, everything is fine and you can skip this section. If you look at the following example with a JPG image, you'll see that browsers output another color code (via Canvas) than with the PNG. But it seams to be consistent for example in Chrome (First) and FF (Second). As a source, they both use an uncompressed 24-bit PNG and an uncompressed JPG. In my tests, the only way to get the right result is with PNGs.

PNG

JPG

It's not much off with default settings, but make sure that you don't have checked "Embed color profile" for JPGs and you turned off "Convert to sRGB" when exporting (via Save for Web...) from Photoshop. See Save For Web, Simply.

How To Avoid Color Misunderstandings

Let the designer do the color code definition and let them specify it somewhere, in a Wiki, within the PSD, a PDF or with the help of a specification tool like Frontify. Be sure, that they use the right color management settings when creating their PSDs. They can't be wrong if they deliver PSDs or PNGs instead of JPGs. If you get a PSD and you're not sure, just disable color management via Assign Profile. If you get the following dialog when you open a PSD, choose Discard the embedded profile.

Conclusion

This is not a huge problem, but it's good to know how it works to avoid misunderstandings. Since even if the colors are correct, every end user might have another display color profile and therefore will see another color, this is not a big thing. When introducing tools for specification, they might not only help you with delivering your designs in an easier and more convenient way, they also reveal things that were eventually made wrong before. That's a good thing — I think.

Further Reading

Setting Up Photoshop For Web, App and iPhone Development (SmashingMagazine) The Mysterious “Save For Web” Color Shift (Viget) Save For Web, Simply (Viget)