I like design and I do design from time to time. Though I’ve read books and did courses on design I think it is an art in itself and as a creative programmer I will never match what real artists can do in design. But I like to get the basics right. Right now I am working on a redesign for my company-website that is long overdue.
I am using Sketch to do the layout, logo design and to lay out a foundation I can then build upon when it comes to writing the html and css. I came up with a blue color that looks awesome in Sketch and built a color scheme based on that. Then I created a button using that color in code and started wondering.
Sketch showed my vibrant and beautifuly blue. Safari on the other hand showed me a less vibrant version of my blue. I thought: “Hmm maybe it is a bug in Sketch when copy pasting colors?”.
After a quick google search I learned more about color profiles. I knew they existed before but to be honest never really gave attention to the topic as I labeled them to “only important in print” in my brain.
So by default Sketch is not using color management. Which means it leaves color displaying up to your system and won’t convert colors to comply to a certain color profile.
A hex code is a hex code and so it is simply displayed I thought. No it’s not that easy. It seems that Safari and Chrome convert colors to an Adobe Spec from 1996. So on my iMac Pro I only get colors that were easy to display for monitors more than 20 years ago. Firefox on the other hand did not downgrade my colors.
What is going on here? Am I missing something? From what I read in this article it is currently not possible to show p3 wide gamut colors in webkit except in images. It seems that there are efforts and a working draft to “upgrade” colors on the web but I would simply expect Safari and Chrome to behave like Firefox and to render that color if the display supports it and otherwise downgrade it.
Let me know what you think and if I am missing some css property or something to get vibrant colors in my browser.
PS: I make use of that blue on my twitter profile. If you look at it in Safari you’ll see a dull version of the vibrant blue you get to see in Firefox.
