5 ms·
The worst part about web colour is that it's not even consistent. If you draw a PNG containing a rectangle with a given colour on to a page with background colo
by jstanley 5y ago
The worst part about web colour is that it's not even consistent. If you draw a PNG containing a rectangle with a given colour on to a page with background colour of the exact same RGB values, then it can look different.
Here's an example: https://incoherency.co.uk/interest/colour.html https://incoherency.co.uk/interest/colour.html
And here's a screenshot of how it looks on my browser (Firefox 99.0, Ubuntu 20.04 LTS): https://img.incoherency.co.uk/3812 https://img.incoherency.co.uk/3812
The square is a different colour to the page background colour despite having the same RGB value (#0cf4c7) but they look different. No amount of changing the colour mode selection in GIMP can fix this.
I opened the screenshot in GIMP and used the colour picker tool to see what colour my #0cf4c7 has turned into, and in the screenshot image it is #67f1c7.
Strangely, when I draw the screenshot in the browser, its colours stay the same, so obviously there is something you can do to the PNG that will make it render the colours you chose.
- electroly 5y agoI don't see the square, FWIW. The colors are a match in Edge v100.
- jstanley 5y agoInteresting. It might just be a Firefox thing. I remember reading a Firefox bug report about this, and the response was that the person's monitor colour calibration must be wrong, which makes no sense to me since even if the monitor colour calibration was wrong, I'd except it to apply to both the page and the image equally. EDIT: This one: https://bugzilla.mozilla.org/show_bug.cgi?id=621474 https://bugzilla.mozilla.org/show_bug.cgi?id=621474 - from 12 years ago.
- alpaca128 5y agoFirefox 99.0 (Linux) here, the square is invisible.
- infensus 5y agoOn Linux, I can see the square in Firefox, but not in Chrome. Interestingly enough, the color in Chrome is identical to the color of the square in Firefox, but when I force sRGB in Chrome (chrome://flags/#force-color-profile), it becomes identical to the background color in Firefox. I don't know what to make of that
- formerly_proven 5y ago> which makes no sense to me since even if the monitor colour calibration was wrong, I'd except it to apply to both the page and the image equally. Color mgmt by browsers is, when it is applied, only applied to images (neither videos nor "CSS colors", broadly speaking). I'd bet you have an ICC profile associated with your monitor.
- bakhy 5y agoI can't see the square either. Firefox 99, Windows 10.
- 323 5y agoI do see a square, also on Firefox 99, Windows 10. I don't see a square in Chrome.
- est 5y agoIt looks the same on my Macbook with Chrome. Did you use some browser extension for eye protection or dark mode?
- jstanley 5y agoNope, I'm not doing anything weird as far as I can tell.
- sph 5y agoSomething's wrong with your Linux, I don't see a square on FF 99, Fedora 36 GNOME/Wayland.
- planede 5y agoMaybe it's an installed color profile thing, and colors from different sources get interpreted against different color spaces? PNGs typically have a well defined color space (implicit sRGB, or explicitly specified otherwise), but the background might get interpreted in device colorspace maybe.
- com2kid 5y agoNo square, Firefox 99 Windows, or in Chrome either. Heck even IE 11 renders it correctly! I think you need to investigate Firefox and how it is using your GPU. Maybe try disabling WebRender? https://support.mozilla.org/gl/questions/1345186 https://support.mozilla.org/gl/questions/1345186
- bmacho 5y agoFor me setting true gfx.color_management.force_srgb in about:config makes the rectangle disappear. I don't have the slightest idea what is going on tho.
- kloch 5y agoThere are several ways colorspace metadata can be included in a PNG. - No colorspace metadata (software should assume sRGB) - Built-in sRGB format chunk - gAMA chunks - cHRM chunks - ICC profile chunks IMO v4 ICC profiles are the modern and best way to encode colorspace info. The problem is not all software uses any or all of these. ffmpeg for example decodes all of these chunks but does not actually use any of it. It even assumes by default PNGs are encoded with rec.701 gamma (common for legacy video). This is why PNG->x264 conversion with ffmpeg has weird colors unless you encode the PNGs with gamma ~2.0 instead of the sRGB standard ~2.2.
- mitchdoogle 5y agoI'm using Firefox 99 on Windows 10. I don't see any distinguishable difference on the page, however, using the Firefox color picker on the square, I get #13fc35
- Androider 5y agoFirefox 99 on Linux, the square is visible. Chrome 100 on Linux, square is not visible. None of the colors match the RGB value #0cf4c7 when using a picker :/ Gimp shows a color of that hex the same as Firefox's square. The Chrome color is much paler in comparison. There's no color profile set for the monitor.
- farzher 5y agowtf is the color of 0cf4c7.png ? it's different in every browser, and even when you download the file, it's again different in every program that opens it. this is not just a browser issue. the Photos app on Windows 11 renders it as 01f4c7. almost 0 red. (although come to think of it, maybe the Windows 11 Photos app is an embedded browser, lol)
- jstanley 5y agoI don't really care what the colour is, I just assume it should look the same in the page background and in the PNG.