We have an application whereby users can apply their own colour branding. This is applied via CSS variables that get overwritten as the page renders. Users get standard colours if they don't rebrand.
I notice however that some colours display completely differently in Chrome/Edge than they do in Firefox. We have observed this behaviour on three separate machines.
div {
height: 5em;
padding: 1em;
margin: 1em;
}
.DivOne {
background-color: #0093f0;
/* Displays as #0996ec in Chrome, and then gets read back
in as a different colour using colour picker */
}
I isolated the differences in a fiddle and using the Windows PowerToys color picker, the following test was done on a single monitor with no colour profile/driver tweaks with the browsers side-by-side.
Note that Chrome on the left is not (seemingly) displaying the colour accurately:
Even stranger (to me) - if I inspect the coloured element in Chrome and use the development tools picker, Chrome actually reads it back in is a different colour:
Can anyone please explain the discrepancy and offer a solution/advice?
Updated
Changing my search terms, I see that this is a problem in Chrome that's arisen many times in the last decade caused by its own colour profile usage:
Fix weird colors in Chrome in just a few clicks
Color picker on chrome gives wrong values
However, based on that information I'm still unsure why:
Chrome would pick a colour differently to that which it displays, and
Chrome Flags settings states, "Forces Chrome to use a specific color profile instead of the color of the window's current monitor, as specified by the operating system" and that is on Default means there should be no difference between the two browsers
...so I am leaving the question open.
Rant alert: As this didn't used to be an issue, it seems totally unacceptable to force Chrome users to start changing colour profiles.
Related
I am experimenting with creating a set of custom mouse cursors for a piece of web software. This is a purely aesthetic pursuit. Initially I was able to pull this off using the following:
.custom-cursor {
cursor: url(assets/images/cursor-invert.png) 4 4, auto;
}
This works in almost all browser/OS combinations flawlessly, however a user has reported a strange issue. They are running Linux/Chrome56 (64-bit) and sent this screenshot:
How the mouse is supposed to look:
The cursor is a PNG24 with alpha transparency, and it looks like the A channel is being flattened. I tried converting all my PNGs into .cur format (which seems to be more supported) and still the same result. Is this just a matter of the specific browser/OS combo not supporting alpha transparency in mouse cursors?
I can solve this by just using a format without alpha transparency, but it won't look nearly as awesome. Hoping there's a way to make this work.
Edit
Here is the cursor image I am using, for reference:
I have a div with the property:
background-color: #327EB2;
When I open the page on a browser I notice that a different color is shown. If I capture the screen and open the captured image on Photoshop, I can see that the color code captured is actually #437BB6. I have nothing set with that color in my CSS stylesheet.
I've tested on different monitors, different color resolutions, different browsers and versions from FF 4+ to IE8+, Opera, Chrome, Safari, etc...
Actually I don't think that's a problem of the monitor, resolution or browser version, because the problem is that the code of the shown color is actually a totally different one!
Also, Photoshop warns me about #327EB2 which is not a "Web Safe color", but I don't think this is the problem because I often use non-websafe colors in my sheets and I've never had an issue like that.
** Fiddle: http://jsfiddle.net/286tE/
*UPDATE
The problem is that the div has a background image and a background-color. The background color has to match the last pixel's color of the background image (as usual), which is #327EB2.
Anyway, I can see a different color from the last pixel of the image to the background-color:
http://test.testblueday.eu/test/cbsissue.png
You can see the page here, the problem is shown after the "Top Marchi" list on the left side:
http://test.testblueday.eu/test/cbstest.html
I've left the plain CSS and JS (not compressed) to let you see all the properties.
** UPDATE 2
I use Mac, but we can see the problem also on Windows.
You problem has nothing to do with the CSS, the problem is in the image!
This is because the examples supplied by you show the correct #327EB2 at the extra background (the one "coloured" via CSS), and that is enough to know that the CSS part is ok.
Beware of colour corrections/management done in the file exported via Photoshop.
If you can't colour manage/revert to the desired colour, another solution is doing the opposite, change the CSS colour to match the last row of the image.
As far as I can see, everything works correctly. Your image at the bottom has color with code '#1080b3' - I just downloaded that picture (gradient_box_emboss.jpg) and took a color with colorpicker in GIMP. When I modify css like this:
.embosser {
background: #1080B3 url('/images/gradient_box_emboss.jpg') right top no-repeat;
color: white;
padding: 5px 6px;
}
Difference is missing. When I printscreen your site and paste it into GIMP, color picker shows color of that "wrong" background is #327eb2. When I open your image you have in your question, color of background is #307db7. It is in jpg and I suppose some color information were lost while compressing raw data to .jpg. Possibly, something similar happens when you are trying to get color in photoshop.
Possibly problem rise when you convert images from one format to another. Simplest fix is above - change color of background to one you have on your image.
I am having an issue with Firefox rendering a few of the .png's that I have loaded into a Wordpress blog that I am preparing for a client. The images look fine in IE 8 & 9, and chrome, but it looks very off in Mozilla. I was informed by our other UX guy that Firefox complies with embedded color profiles that may warp the tint of your image. You can view the tint shift by going to :
http://blog.hendrickspower.com
If anybody has any idea of how to over ride the color profile, I'd definitely appreciate the heads up!
Thanks
Here is an image that shows the difference that I am seeing.
alt http://s11.postimage.org/jbnzek4g3/color_embed.jpg
The difference in rendering is due to an ICC color profile embedded in the image. When Firefox finds a color profile it will combine it with the color profile of the display and adjust image rendering accordingly. This will normally make sure that the image is displayed the same on different displays. However, it might also cause undesired effects if the display profile is incorrect.
At least Windows 7 allows you to calibrate display colors. Not sure whether this feature was also present in earlier Windows versions but they definitely allowed selecting a color profile file in the advanced display settings - you could replace the driver-supplied profile by sRGB.
If you absolutely don't want different image display on different computers then you should just remove the color profile from the image with a tool like jStrip and pngcrush.
Chrome renders #FF3A00 as #FF0000 for some reason. I included a screenshot from jsfiddle to illustrate the point. The colour that the Color Meter reports (and what I see) differs from what CSS says.
This happens to other colours too. For example, #FFAF00 is rendered as #FFA400 according to the Color Meter.
However, the colours are rendered without problems on Safari and Firefox. I'm on a Mac using Chrome 11, Safari 5 and Firefox 5.
I'm sure there's a logical explanation. Any ideas?
Update: I'm attaching a screenshot of Chrome next to Safari showing the very same page. I checked this image in Photoshop: the colours are #F00 in Chrome and #FF3A00 in Safari.
Ok, as it turned out, I needed to restart my Chrome. I often connect my macbook air to a 24 inch monitor. It looks like Chrome displays the colours incorrectly when I change to a monitor that's different from what was used when Chrome was started.
I found the answer on the Google Help forum : "I should mention that in OS X, every time you change your monitor or monitor profile (e.g. if you switch from your laptop display to your external display), you MUST restart Chrome for it to get the proper monitor profile information from the OS."
By default both Firefox and Safari use the sRGB color profile. You must do the same, if your Google Chrome takes a different color profile as default.
Access at Chrome: chrome://flags/#force-color-profile
Change Force color profile to "sRGB".
Relaunch your browser and testify the rendered colors now.
I recently posted a similar question: https://stackoverflow.com/questions/6338077/google-chrome-for-mac-css-colors-and-display-profiles
As Andrew Marshall answered there, this is a known issue: http://code.google.com/p/chromium/issues/detail?id=44872
Mac has color correction set up for your monitor. Your browser may or may not use color correction for web content/images depending on its setup. Your color picker reports what your OS thinks it is rendering. Your browser may report something else.
Color on computers. Something many of us take for granted but never bothered to understand how it is rendered.
Chrome color picker works by taking color from current monitor color profile,and the problem may happens by changing color setting or sometime change monitor, please check the below method to solve.
Go to chrome://flags/#force-color-profile and click Reset all to default
Thanks.
In case someone else come here because firefox images looks too colorful (over saturated).
Full guide on how to fix it https://cameratico.com/color-management/firefox/
Shortly:
Type in about:config on your Firefox address bar
Set gfx.color_management.mode to 1
Set gfx.color_management.enablev4 to true
Restart firefox
Now Firefox will display colors same as Safari, Chrome and all other browsers
I changed the Colour Profile in OS X and that sorted it for me.
See the screenshots below using different Color Profile. Note, in the screenshots I'm trying to differentiate between #ff00ff, #ff1aff, #ff33ff and #ff4dff. It's only when I don't choose the default OS X colour profile that I can differentiate the colours correctly.
Default colour profile:
With a different colour profile:
From: CSS colors on OS X displaying correctly in Firefox but incorrectly in Safari and Chrome (potentially 'solved')
I found Safari and Chrome could not differentiate between #ff00ff, #ff1aff, #ff33ff and #ff4dff. But Firefox could. In addition Inkscape, an X11 app, could. But Gimp and Libreoffice Writer, non X11 apps, could not. Firefox and X11 apps seem to be using their own colour profile somehow.
I have no idea why Mac defaults to Color LCD profile which does not do this differentiation amongst others.
Had this problem with Chrome (Lubuntu) when exporting a PNG in Photoshop. Solution: File -> Save As -> Uncheck "ICC Profile: Adobe RGB (1998)".
I'm testing a new site, and I have a div with
background-color: #bbf6bb;
That seems innocuous enough to me. And yet, on my MacBook Pro, the color looks very different in Firefox 3.6 vs. Safari 4. In Safari, it's the color I'd expect from the hex value: a pale green. In Firefox, there's a definite bluish tint, making the color turquoise.
I'm aware of color inconsistencies that result from different treatment of images across browsers, but in pure CSS? Really? I'm guessing that Firefox trying to correct for my display in hopes of delivering better consistency with print, but I'd much rather have my site look the same hue to my users regardless of their choice of browser. Any ideas? Can someone confirm that Firefox is the culprit here?
[Update: This seems to have been a fluke. Specifically, it's a narrow issue with Firefox—see my answer below. I'm puzzled, but relieved.]
but I'd much rather have my site look the same hue to my users regardless of their choice of browser.
That's just the thing - without colour correction, it won't look the same to different users, because not every monitor has the exact same colour response.
I've isolated the issue! It's definitely a Firefox 3.6 bug (running on Mac OS 10.6). Seems to have something to do with having a large number of tabs open. If I create a new tab and go to the page, I get the slightly off colors (blue-green instead of just green). If I create a new window and go to the same page, the colors are accurate. And yes, this still occurs if I refresh both instances.
[Edit: Screenshot got misplaced, but I stand by this answer.]
color managent color profiles not only changes the images (that can save those) but also the rgb colors.
This has nothing to do with the browser, more with the user's monitor's colour correction. Every monitor has slight differences in how they show colours; additionally, the background lighting around the monitor plays a role, as well (warm daylight vs. usually colder inside lights etc. etc).
Sadly, there's nothing really you can do. You could embed a colour profile into your graphics, which is how design professionals do it when sending data to print, but that will provide halfway decent results only for the minuscule number of (graphic designers') monitors that has undergone colour calibration and is properly set up - and I think IE won't parse colour profiles at all.