Hacker News Reader

Comment by jstanley | Hacker News Reader

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

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

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.

View on HN

There 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.

Maybe 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.

No 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

Firefox 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.

Something's wrong with your Linux, I don't see a square on FF 99, Fedora 36 GNOME/Wayland.

I don't know what could be wrong. I haven't done anything weird to it. I remember this exact problem from at least 6 years ago, on many different computers. I thought this was just how it was.

I don't see it either, same firefox, Ubuntu Mate 21.10 X11.

For 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.

I'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

I can't see the square either. Firefox 99, Windows 10.

I do see a square, also on Firefox 99, Windows 10. I don't see a square in Chrome.

wtf 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)

I don't really care what the colour is, I just assume it should look the same in the page background and in the PNG.

It looks the same on my Macbook with Chrome.

Did you use some browser extension for eye protection or dark mode?

Nope, I'm not doing anything weird as far as I can tell.

I don't see the square, FWIW. The colors are a match in Edge v100.

Interesting. 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 - from 12 years ago.

Firefox 99.0 (Linux) here, the square is invisible.

> 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.

On 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

Which Linux? I can't reproduce on Fedora 36 GNOME/Wayland.

Ubuntu 20 Gnome/X11

Reply on news.ycombinator.com