Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Chris Roberts
3,970 PointsColours appear different in Safari
So, I'm making a little site. I've created some simple icons using just one colour. I've taken that same colour and applied it to the header of the site (through a CSS declaration, both the icon and the header have the same HEX value).
When I test the site in Chrome, it looks great. Both the icon, and the header have the same colour when I hover over with DigitalColor Meter (which you would expect). BUT, when I test the site in Safari I notice something, the icon colours are the same (I'm guessing because they're pngs/pictures and not CSS) but the colour of the header is different. It has a different HEX value and is insanely more saturated and dark.
This makes the colours of the icons and header look extremely different and it really ruins the look of the site. Anyone else experienced this/know of any fixes? Thanks everyone!
2 Answers
Cindy Lea
Courses Plus Student 6,497 PointsWhile I havent experienced this personally, I found an article where someone had similar experiences that you did with colors. Not sure if this will help, but wanted to pass it along:
https://css-tricks.com/color-rendering-difference-firefox-vs-safari/
Cindy Lea
Courses Plus Student 6,497 PointsWow! Cool! Sometimes you have to do tricks when all else fails.... :)
Chris Roberts
3,970 PointsChris Roberts
3,970 PointsThanks for the link, I'd had a look at this one and unfortunately didn't find out what was happening. However, I ended up just taking taking a screenshot of the colour (in like a tiny 5px by 5px image) and applying the image of solid colour to the header. Because images appeared fine in both browsers this seems to have done the trick - The colours in the header now match those in the icons :)