I am developing a widget which utilizes exact color values, anything different and the results are incorrect. After spending time tracking down why Chrome is incorrect, I found that Chrome is probably applying color management to my colors.
If I load up my canvas in Edge (the Chromium based version), and load up the canvas in Chrome, I then do a snippet and load it up in Gimp. For Edge my 100% green appears to be RGB(0, 255, 0), for Chrome my 100% green appears to be (0, 255, 60).
Unfortunately, while this kind of color management is a good thing, it is entirely the wrong thing for my application. Is there a generic way to disable color management or a way to probe what the end correction will be so I can counteract it? Kind of messed up that you can't tell a browser to just display a color in the exact way you want.
As an example, Chrome inspector says my CSS is RGB(0, 255, 0), yet, it is rendering a different color in browser. If this is not color management, then why? If it is color management, I would like to override it, as it is 'correcting' the color into incorrectness.
Edit:
Further research shows this is maybe from a recent update:
https://www.faqforge.com/windows/fixed-google-chrome-wrong-color-after-update/
Curious if this is future intended behavior or just a temporary bug.
Edit 2: Forcing Chrome to sRGB fixed the issue on my browser. Sounds like Chrome maybe is defaulting to a non-standard color profile with a recent release.
Related
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.
Google Chrome always seems to be changing the color of an image that I'm trying to match to a background color. I tried saving it in Photoshop and GIMP and even adjusted the color settings in each but it doesn't help in Chrome. FF and IE work fine (for once).
The color of my image is #282828. After I saved it as a PNG, I reopened it in both GIMP and Photoshop and used the eyedropper tool to confirm that the color was still #282828. When it renders in Chrome it's darker. I have a div with a background color of #282828, and the image is right next to it. I took a screen shot and the div's background color was #282828 and the images background color was #1d1d1d. I tried this for several different colors and each has had the same result. I even tried making the source image the color Chrome was rendering it as but Chrome still changes it. So for example, since Chrome was changing #282828 to #1d1d1d, I made the source image #1d1d1d, and when I rendered it in Chrome it was not #1d1d1d, but some other darker color.
At this point, I'm looking for either a fix or a programmatic work-around. Because the image is transparent, has curves, and a drop-shadow, there's really no way for me to avoid replacing the it, or even parts of it, with html.
Update:
I also tried saving it as a jpg and gif. gif actually works but can't preserve the drop shadow. The image I'm using is attached. If I take a screenshot of this in Chrome, GIMP's eyedropper tool says it's #1d1d1d. If I open the original and do the same, it's #282828.
PNG uses gamma correction to try to ensure that the image looks kinda the same across all monitors, and this can cause color mismatches like the one you're seeing. It's a combination of image editor issues and browser issues: image editors are not forced to embed gamma data inside images, and browsers are free to ignore the gamma correction if it's there and free to enforce some at random when it's not there. In this case, I'd rather think that Firefox ignores it.
Use a transparent PNG if you don't want its background to interfere with your page's background.
[EDIT] For your specific case, you may be able to replicate the graphics you're looking for by styling elements, using border-radius and box-shadow, two widely-implemented CSS3 properties that reasonably decay on older browsers.
I have some CSS for displaying a reflection on an element which uses -webkit-gradient to fade out:
.foo { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)), color-stop(0.7, transparent)); }
On browsers which support -webkit-box-reflect such as chrome, this displays a reflection of the element which gradually fades out as expected.
On browsers which don't support it at all, no reflection is show.
However, on Android's browser, a reflection is shown, but doesn't fade out.
Is there any way of getting Android to either:
fade out the reflection, or
not show the reflection at all.
I know I could use javascript to detect the browser and change the style accordingly, but I'd much prefer a CSS-only solution.
Without an example file or link, it is a little difficult to see what you need.
I also played with some reflection stuff a few months ago and didn't find anything that could do what you describe. I have some steps to get you what you want, outside of code. I recommend the item you wish to reflect be a PNG on a transparent background, to start.
The steps:
1.Take the image into your favorite image manipulation program (ex. Photoshop)
Double or extend the image canvas the necessary amount to include the reflection in the appropriate direction
Duplicate the layer (Photoshop-Layer/Duplicate Layer)
Reflect the image. (Photoshop-Layer/Image Rotation/Flip Canvas (your direction))
Move the duplicated layer such that it appears as a mirror using the Move tool
Select the Marquis tool, and set the edge blur to about 50% of your original image width.
Drag your cursor over the "reflected" layer, don't worry if it says the selection lines won't be visible, unless it says nothing was selected. If it says nothing was selected, reduce your edge blur to about 25% and try again.
Once you have a selection, be it visible or not, delete the selected area. This should give you a "reflected" look.
If desired, add a background on a layer below everything else.
Save your image as a jpg if you don't have a transparent background or a png if you do. Use it in place of the image you were reflecting and fading with code. This will be mostly browser compatible.
CSS isn't designed to handle stuff like that. In other words: no, it's not possible.
I'm having similar problems trying to do things with background gradients in the Android browser, and it appears completely unsupported
Unfortunately the above answer is right, there isn't a way to split your declaration up in a nice progressively enhanced way. You could use JavaScript/modernizr as you mentioned, and at least set a support class(es) so you don't actually have to flip the style within code.
You could try reproducing this effect with a HTML canvas element, using drawImage with your image and transforming it. Although canvas can be slow in mobile webkit.
Good luck
do gradients work at all in the android browser?
if they do, make sure you're using the correct version. There's an old webkit format you may need to use.
If not, just use modernizr to hide it on places that don't support gradients.
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.