Search code examples
cssfirefoxcolorsdifferencecolor-profile

Different colors in browser

I have a strange problem in my browser. Color of page's elements looks different than I described in my css code.

I checked it with browser's color picker and it showed right color (#5cb85c) and right preview of button's color. But when I did screenshot of page and checked it with PhotoShop's color picker I got #7daf63.

It's easy to see differenses on this screenshot without any additional technical tools.

Why result in browser's screen and result of browser's color picker are different? Any ideas?

ENV: Mac Air, FF 38.0.1

enter image description here

UPD 1

my problem in different colors in browser. Color on screen and color on colorpicker preview. I want to understand why?

enter image description here

Solution

  • I checked it with browser's color picker and it showed right color (#5cb85c)

    You should understand that #5cb85c is just an RGB value an by itself doesn't specify a color. The value only has meaning when you also know the colorspace.

    In sRGB #5cb85c is one color, but in AdobeRGB or in your monitor's color space #5cb85c is a different color appearance.

    It works the other way too. The same color appearance will be specified by one value in sRGB but to match it in another colorspace you will use a different color value.

    For example: sRGB #5cb85c is the same color as AdobeRGB #7fb762 and that same color appearance will be specified with a different value in your monitor's color space.

    So to understand what is going on, you need to see what colorspace you are using in photoshop and try to understand what space Firefox is using. Firefox allows color management to be changed in the preferences, so the browser might be using sRGB, or your monitor's space. Either way, you won't get color values to match unless you are using the same colorspace.