Jump to content
Grateful Grant

Browsers render different colors. What's the bottom line?

Recommended Posts

What's the bottom line with the different browsers and working with color now?

Using Edge (or IE) my colors appear exactly as I thought I designed them.
Fairly recently, Chrome and Opera show the colors as really washed out.

Firefox is still showing the original like Edge does.
See the image blow (with a color picker).

What's the bottom line now? Will we have to redesign and color our icons and logos, or will there be a script which tells the browser to show the colors as we intended them?

Or will we just need to get a more modern monitor in the future, so that we can design images and colors more accurately to a standard?

browser-colors.png

Edited by Grant Barker

Share this post


Link to post
Share on other sites

And then look at the site on a tablet or phone and they will look different again. And consider that people have different monitors and screens with a variety of brightness and contrast settings.

And everybody sees colour slightly different because of how their eyes work.

It's just one of those things and nobody really cares to much. As long as the content is good people will not worry about the subtleties of colour.

Share this post


Link to post
Share on other sites

I understand where you're coming from but this issue has only been a recent change in Chrome and Opera. Before they all showed the colors to be the same hex. So how do we get the same hex in all browsers in the future? We could just a few months ago, and forever before that. 

The differences in the above example are not subtle. One logo looks clean and the other very dirty.

The YouTube logo is FF0000. In Chrome it's now DB3318.

So, I'm curious of when all the browsers will show the same standard or profile, or whatever the issue is, and what we have to do to get back to 3 or 4 months ago.

Edited by Grant Barker

Share this post


Link to post
Share on other sites

There is no way to make sure all colors will look the same in different applications. It depends on the systems and graphic cards settings for color management. You might be able to configure the settings for different applications under your graphic card settings. Make sure all applications uses the same color profile. Most browsers should suppport sRGB.

Applications like PhotoShop uses advanced color management like AdobeRGB color profile which tend to render colors with more saturation than sRGB, color management in browsers are much more limited.

EDIT: for more consistent results make sure your icons are saved as sRGB: https://om4.com.au/client/preparing-images-color-profiles-srgb-adobe-rgb/

Edited by Nillervision

Share this post


Link to post
Share on other sites
1 hour ago, Grant Barker said:

So how do we get the same hex in all browsers in the future?

You can't. You just have to live with it.

Share this post


Link to post
Share on other sites

It's a conspiracy I tell you!
I should check out my window..

(I'm using Snipaste as a colour picker.)
 

If you guys are seeing FF0000 when you check yourselves in Chrome with your own colour picker, then I'm really hoping it's a setting which has changed on my PC in relation to how Chrome and Opera show colours.

different-colours.png

Share this post


Link to post
Share on other sites
On 29/12/2017 at 10:13 AM, Grant Barker said:

I understand where you're coming from but this issue has only been a recent change in Chrome and Opera. Before they all showed the colors to be the same hex. So how do we get the same hex in all browsers in the future? We could just a few months ago, and forever before that. 

The differences in the above example are not subtle. One logo looks clean and the other very dirty.

The YouTube logo is FF0000. In Chrome it's now DB3318.

So, I'm curious of when all the browsers will show the same standard or profile, or whatever the issue is, and what we have to do to get back to 3 or 4 months ago.

This is one of the reasons I think colour theory like the colour wheel is so important especially for digital products, as although you could break the rules it is only advisable when you have enough experience to do so because it is not just the colour that needs to match, it's also the hue and tone that matters due to things like this, as even if the colour does not exactly match your intent, at least the tone and hue will look right and everything will still work together.

Share this post


Link to post
Share on other sites

hmm installed snipaste and sampled youtube's logo in chrome and it was still #ff0000 - what colour management do you have for windows?? also what if you make a codepen with 'pure' css rgb or hex colours and then sample those? i.e. try adn take colour profiles or lack of attached to image out of the eqation? I  had a similar thing with a blue i was using for a site between browsers too....

5a47e81ae49f1_chromeyoutubecolours.png.74bfb18182dabb3c0f6e9e3c08ccec23.png

Edited by davep
forgot something

Share this post


Link to post
Share on other sites
4 hours ago, davep said:

hmm installed snipaste and sampled youtube's logo in chrome and it was still #ff0000 - what colour management do you have for windows?? also what if you make a codepen with 'pure' css rgb or hex colours and then sample those? i.e. try adn take colour profiles or lack of attached to image out of the eqation? I  had a similar thing with a blue i was using for a site between browsers too....

5a47e81ae49f1_chromeyoutubecolours.png.74bfb18182dabb3c0f6e9e3c08ccec23.png

Thanks DaveP.

Actually, I'm learning about some of this stuff just the past couple of days really. It hasn't been an issue before. I asked at the Adobe forums, which has taught me about color management in general.

May I ask what color management ICC profile you have chosen? I'd like to go through my list of profiles and see if I can get FF3300 via Chrome as a basis for heading in the right direction for my monitor. Thanks.

Edited by Grant Barker

Share this post


Link to post
Share on other sites

There are many possible variables, from the calibration of the screen to the way each browser renders each colour number. I would suggest publishing the logo in svg format. I have had better consistency with that format.

Hope this helps.

Share this post


Link to post
Share on other sites

Just a quick update. It turns out that turning Hardware Acceleration off in Chrome and Opera fixed the washed out colors. Now, all of the browsers show the same colors.

Share this post


Link to post
Share on other sites

Not worth worrying about at all.  You have to accept that colours typography and so on will look slightly different given the array of environments the web operates in.  As web developers we have far bigger fish to fry, especially when there's nothing at all you can do about these differences.

Share this post


Link to post
Share on other sites
8 hours ago, rbrtsmith said:

Not worth worrying about at all.  You have to accept that colours typography and so on will look slightly different given the array of environments the web operates in.  As web developers we have far bigger fish to fry, especially when there's nothing at all you can do about these differences.

I understand. As a content creator, I was concerned that the result I was getting, was a mistake I was making in the content creation process. I appreciate that once it's online - it's up to the recipient's hardware, specs, settings, eyesight, etc.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ashleyben
      Please suggest me best Browser that support most of the SEO addons.
    • By hugo100
      It would be much appreciated if anyone could offer suggestions on how to improve my homepage;
       
      www.teenprez.co.uk
       
      My slider doesn't look great. However every time I try and redesign it with another photo there seems to be a clash with the grey colour of the Store Messages. Solutions?!
       
      Also what do you think of the typography and the logo?
       
      Many thanks,
      Hugo
    • By tylerjmorrison
      Hi Forum,
       
      I was wondering if I could get your personal and professional opinion when it comes to branding? I am a Realtor with a company, Keller Williams, who's main color is red.
       
      To differentiate myself from other Realtors, with Keller Williams and other competing brokerages, I'd like to stay away from the typical colors - red, black, grey and white. Being in a saturated market, it's important to be different.
       
      Thoughts on this combination?
       
      Thanks in advance!



    • By nfbnnttn
      Hey guys, I've got a little thing here for you pros. HTML: <html> <head> <title>Untitled Document</title> </head> <body> <div id="container"> <div id="bluebox">ON</div> <div id="redbox">ON</div> <div class="clr"></div> </div> </body> </html>  
      CSS: body { background-color:#eee; font-family:Arial, Helvetica, sans-serif; font-size:20px; } #container { width:320px; background-color:#fff; margin:20px auto; padding:40px; line-height:50px; text-align:center; font-weight:bold; } #container:hover { background-color:#FC3; } #bluebox { float:left; width:148px; height:48px; background-color:#0080FF; margin-right:20px; border: solid 1px #fff; } #redbox { float:left; width:148px; height:48px; background-color:#FF2626; border: solid 1px #fff; } .clr {clear:both;}  
      So, basically I want to play around with background colors here. I want to know how I can control the background color of one div by click other divs. I've designed a clear platform here to test on. The container has a plain white bg with a orangy hover bg. When I click "ON" on the blue box, i want the background of #container to change to blue and display "OFF" in the place of ON. When hovering of container while blue/red in ON, there should be no hover effect. When I click "OFF" on the blue box I want the background color of #container to revert back to its original color and display ON again. and the same with red box...click "on" and bg goes red, click "off" and you revert to normal container bg color. If you need further explanation then please ask lol. Any help will be greatly appreciated. Thanks.
    • By jojeangel
      Good Morning People ,
       
      I am having weried problem which really effect my design my layout ...etc , the issue is that I choose the following #3A5673 , in deskto browser the color as i want , when in say desktop browser i mean over windows machine and Mac Machine over Firefox , Safari , Chrome , IE , ...etc as shown in below picture
       

       
       
       
      However, the website when i am using it over IPAD the colour totally shade diffrently which is the below
       

       
       
      I am using ASP.NET 4.5 over server IIS7 , 2008 R 2
       
      So , any body knows how to fixt that and make them with same shade , I know it look silly request but is important to me , so thank you in advance , and help
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      58,433
    • Most Online
      4,970

    Newest Member
    f9ariel
    Joined
  • Forum Statistics

    • Total Topics
      65,747
    • Total Posts
      452,964
×