TIL my brand colors looked totally different on mobile vs desktop for 3 months

Last week I opened my own website on my phone and almost dropped it. The green I carefully picked looked like muddy brown on mobile screens. Nobody told me that RGB vs sRGB calibration could shift colors that much on different devices. I spent an afternoon checking 12 screens around the office and found 8 distinct versions of my logo color. How do you guys test your brand colors across devices before sending things live? I need a better system than just guessing.

2 comments

2 Comments

anthony1653d ago

Ngl that's actually genius with the physical color card. I took that idea and went a step further - I printed my logo on high-gloss photo paper and then laminated it so it wouldn't get fingerprints or smudges over time. Then I made a simple checklist with like 15 phones from friends and family over a weekend. The Samsung Galaxy A series was the worst offender, turned my blue into a weird purple-ish gray. I also started screenshotting my design on each device and comparing them side by side in Google Photos just to see the color differences clearly. The laminated card trick really helped because I could hold it up to any screen without worrying about the paper getting dirty or bent.

gavin_mason313d ago

I ran into this exact issue last year and what finally worked for me was building a physical color card. I printed my logo on a few different paper types with different finishes matte glossy whatever and then literally walked around to all my coworkers phones and tablets and held the printout next to the screen to see how close they matched. It sounds dumb but seeing the real color next to the digital version made it super obvious which screens were way off. I also started using a tool called DisplayHDR test patterns to calibrate my own monitor at home before I do any color work because if my main screen is wrong everything downstream gets messed up. For quick mobile testing I keep an old iPhone and an older Android phone in a drawer just for checking colors because the cheaper screens really do shift things more than the expensive ones. The printout trick saved me from a lot of headaches because it showed me that some of my brand colors were just too similar in certain lighting conditions on mobile screens.