I've been building a website under Ubuntu 17.10 and use Firefox and Chromium for testing. The two browsers show quite different colors (not only for images but all colors) and I always thought that it is Chromium which for some reason wrongly over-saturates them, so up until now I always chose colors that looked right in Firefox.
But I'm starting to get more and more complaints about the website's background being too purple - which it shouldn't be in my opinion as only the blue component of it's color (#eeeeff) is "elevated", but it has reached a point that more people are seeing it as purple than blue, what makes me confused.
This is the aforementioned color displayed in Firefox (left) and Chromium (right).
And this is how I see a website:
The difference is quite large (notice how even the favicon is different) and I'm asking you to tell me which one is the browser I should trust when choosing the colours of my websites and whether I could do something to avoid it being displayed so differently in different browsers.
(There are some users that see the overly saturated colors in Firefox too. So now which is the right one, really?)
Another option is to open chrome://flags/ and select the option sRGB on the Force color profile item.
By using this setting instead of disabling the Use hardware acceleration when available, you don't lose some nice features like the 3D view on Google Maps.
Solution found here: https://www.reddit.com/r/Fedora/comments/74h5yh/blue_shows_as_purple_in_chrome/
Using GPick as a Color Picker and calling a Website with Color Hexcode like
http://www.color-hex.com/color-palette/54430
I see, that Firefox renders the RGB Colors exactly, meaning GPick identifies the same Hex Code from CSS.
Whereas Chromium renders some kind of differnt color.
You can call
chrome://flags/#force-color-profile
and set the Color Profile in Chromium to sRGB, so the rendered Color from Chromium is identified the same as the HexCode with GPick.
If you disable 'Use hardware acceleration when available' in Chromium Settings and relaunch, Chromium displays colors correctly. When turned on, Chromium colors are off. I consider this as a workaround until Chromium color management issue with hardware acceleration is resolved.
With the other two colours being equal, your colour is right in the middle of "blue territory".
If you convert it to HSL and look on the hue line, you can see it is right in the middle of the "blue" frequency range.
Consequently, any hint of green or red is incorrect.
Related
I am trying to insert Unicode characters into a TextView. In particular, I want to include a check mark and an "X". I found two Unicode characters to do this, namely \u2714 and \u2716. These show up as shown below. These are Ok I guess but I'm not crazy about the colors. Ideally, the check mark would be green and the cross red. Or at least both the same color. TextView.setTextColor doesn't help.
My guess is that these colors are baked into the font (typeface). I guess I could download a boatload of TrueType fonts and try them one-by-one, but that seems like cruel and unusual punishment.
Does anybody know a way to change the colors? (or otherwise do what I want)
I suppose I could re-architect the app to use images but that would entail unacceptably major re-structuring.
Well, no one responded, so I'm posting this answer to capture what I think I learned. From my reading, it appears that color in TrueType fonts is a non-standard, vendor-specific extension to the TrueType specification, which was added to accommodate emoticons. So I guess I'm out of luck. Fortunately, It works fine on my Samsung if I can tolerate the colors.
I recently discovered this historical document, which purports to act as a test of UTF-8 encoding for whatever application displays it.
When I paste it into my terminal (iterm2), it loads the box drawings at the end beautifully (except for a couple at bottom right):
But in both Chrome and Firefox, they are crooked and clearly wrong:
It seems the difference has to do with the width of the rendered character: for example "╲" displays in my terminal as wide as other characters such as "a", but in the browser it displays wider.
Is this a deliberate choice, and if so what inspired it? If not, where is the right place to file a bug?
EDIT
Thanks to Tom Blodget's answer, I am now aware that fonts are an important consideration. I'll clarify:
In my screenshots above, Firefox and Chrome are using Courier as the monospace font, while the terminal is using Monaco. In both contexts, the font seems to apply as much to the box-drawing characters as to the ASCII ones: when I change the font, the appearance of the drawings changes as well as that of the surrounding text.
When I switch the terminal to either Courier or Courier New, it shows the box drawings equally well -- in some ways better!
When I switch either browser to Monaco, it still shows the box drawings wrong, again from characters apparently displaying at a wider-than-monospace width.
So it still seems like the browsers are doing something wrong.
When I go to dev tools, I see the entire test is one pre element. Several fonts are being used on my system. Everything looks okay except the hatch pattern on the right.
If I hack out all of the other text, the only font used is Consolas and it looks okay. I think it's down to which fonts you have, how the browser prioritizes them, especially when it has to use more than one, and (conjecture) two monospaced fonts need not have the same width.
A terminal is likely to be less adept at using multiple fonts, instead, using one fixed one or selecting one "best" match for the required characters.
[Google Chrome 72.0.3626.96 on Windows 10.]
This is likely the same as https://bugs.debian.org/981577
If you have any old fonts installed that don't cover the unicode BOX DRAWING range, it's likely that your browser is stitching them together. While each font itself might be monospace (each glyph is the same width within the font), the combination of fonts might not be monospace (because glyph width differs between fonts), which is why the alignment fails.
I found on my system that uninstalling the legacy Bitstream Vera font resolved the issue. (Bitstream Vera has been superseded by DejaVu Sans)
I am replacing the cursor with an SVG, and it doesn't match the color of other elements on the page.
I have attached an image below (taken with my phone, because I cannot screenshot the cursor) Both SVGs were saved from the same file, both have a color value of #FF0000. This persists across all browsers.
The TOP button is applied as a background to the element.
How can I fix this?
Apparently, the two colors appear to be identical on some monitors, but drastically different on others. In particular it's the Apple Color LCD profile on Macbook Pros that creates a drastic difference. Unfortunately this isn't something I will be able to solve.
I've had long standing issues with images being different shades on different browsers - for example on OSX I can make a purple or green box and it will look different on chrome than safari. I have tried exporting as png8, png32, gif, jpg, on and on and nothing changes. I'd love to find some real color safe chart or hex generator or some info as to how I can get around this issue. I've tried using web safe color palettes with same issue. It's really frustrating having a logo look great on one browser and off on another. Also matching CSS to an img will work on one but not the other.
More tests:
The answer about color management led me to a lot to read but doesn't seem to be the issue - both safari 6 and current chrome have color management yet they render images different hues. I made a test of about 10 images exports (gif exact, jpeg, png24, png8, gif adaptive, etc) and did the same in both fireworks and photoshop cs6. The result - both app export different colors (something I suspected as PS exports in sRGB I think and I am not sure about FW as it has no settings) - however most images, regardless of app export. render differently in the browsers. What is of concern is that while chrome's images pretty much matched the css color, none of safari's images (21 of them total!) came even close to the css hex that I used in both a web css test and to define the color in the apps.
I have uploaded the screenshot - the top is safari and bottom chrome - the top left corner is the css only and all the rest are the various exports from both photoshop and fireworks using most export options.
http://www.pictureshoster.com/files/6wp6irm154cre3faop2.png
Maybe this has to do with color management. Some browsers like Firefox or Safari support color management.
You could try to temporarily disable color management in Firefox by going to about:config and setting gfx.color_management.mode to 0.
You can find more information about firefox color management here:
http://www.metalvortex.com/blog/2012/03/16/831.html
I've placed an image on top of a div. I'm trying to blend the image into the div (The div is a solid color). In Google Chrome, it looks great! The colors blend perfectly. In IE 7, however, the colors show a hard line even though they should be the same color! After some examination (a print screen put into paint.net to check the actual RGB values), IE 7 is actually lightning up my image.
The blend has to look seamless. Google Chrome was fine with this thus far. Any ideas why IE 7 wont display the color right?
The two browsers are using different rendering engines. There are minor differences between them in how they render graphics, particularly jpegs.
The differences are minor but unavoidable.
Most of the time it goes unnoticed; it only makes an appearance in cases like yours when you try to position it against an element with a solid background colour that is supposed to be the same.
You may be able to resolve the issue by using a different image format. Try saving the image as a PNG. PNGs tend to be rendered more accurately between the browsers than jpegs, so that might be enough to solve your problem.
If that doesn't solve your problem, you could try using PNGs alpha transparency feature to produce an image with a fade to transparent at the edge, and then overlap the background colour behind it. This will definitely give you a smooth transition, but is a bit more technical, so harder to achieve. It will also give you problems with older versions of IE (IE6 for sure, I think you'll be okay with IE7), as they had some major bugs with PNG transparency. (If this is an issue for you, there are work-arounds for this; google IEPNGFix for more)