Color distortions (some screenshots look "reddish" or "greenish")

[jmuheim]

Hello

I'm using Paste.js for many years, but sometimes screenshots seem to have some color distortions. Here's a screenshot of my app after pasting 3 screenshots into it:

As you can see, although all 3 screenshots are very similar in its content, they vary quite a bit regarding their general color palette (or whatever you would call that).

Do you see a way to fix this? Thank you for your great work! 👍

[layerssss]

@jmuheim I instanly thought they look like they come from different color profiles (sRGB, Apple RGB etc) from my experience.

But it seems strange as if all 3 examples are screenshots from Mac. Browser / JavaScript shouldn't do anything to the image data but they could've been processed by server side. (ImageMagick etc.)

If you post the URLs to the 3 screenshots I can help do more digging into the files.

[jmuheim]

Thank for looking into this so quickly! Here are the 3 screenshots:

• https://azubis-audit.access4all.ch/uploads/image/file/250/file.png
• https://azubis-audit.access4all.ch/uploads/image/file/249/file.png
• https://azubis-audit.access4all.ch/uploads/image/file/251/file.png

To add some more context:

I can paste the same screenshot again and again from clipboard, and the "color palette" changes nearly every single time. So it seems to happen while pasting it browser-side, not while processing it server-side.

[layerssss]

That is so strange. I've ran imagemagick to check if I can find anything, using identify -verbose ~/Downloads/file\ \(1\).png.
The output looks quite different then screenshot file produced on my mac.

• Did you take the screenshot using the mac builtin screenshot tool or other apps?
• Did you take screenshot using the macbook display or on an external display?

@jmuheim

[jmuheim]

I took the screenshots using CleanShot X (https://cleanshot.com/).

I'm using a Macbook Pro, no external display.

[layerssss]

I did a diff of the output of identify with my screenshot vs your one.

2c2
<   Filename: /Users/layerssss/Downloads/file (1).png
---
>   Filename: /Users/layerssss/Downloads/042702dd-a8a5-4d9d-aea3-bc468e53efb3.png
6,7c6,7
<   Class: PseudoClass
<   Geometry: 1150x366+0+0
---
>   Class: DirectClass
>   Geometry: 648x452+0+0
10c10
<   Type: PaletteAlpha
---
>   Type: TrueColorAlpha
13c13
<   Channels: 5.0
---
>   Channels: 4.0
18c18
<     Alpha: 8-bit
---
>     Alpha: 1-bit
20c20
<     Pixels: 420900
---
>     Pixels: 292896
23,29c23,29
<       max: 251 (0.984314)
<       mean: 227.441 (0.891927)
<       median: 238 (0.933333)
<       standard deviation: 40.5632 (0.159072)
<       kurtosis: 14.5833
<       skewness: -3.65804
<       entropy: 0.529521
---
>       max: 255 (1)
>       mean: 238.933 (0.936993)
>       median: 255 (1)
>       standard deviation: 46.9072 (0.18395)
>       kurtosis: 18.1079
>       skewness: -4.34735
>       entropy: 0.301922
32,38c32,38
<       max: 251 (0.984314)
<       mean: 226.364 (0.887704)
<       median: 239 (0.937255)
<       standard deviation: 43.7502 (0.17157)
<       kurtosis: 12.8793
<       skewness: -3.50019
<       entropy: 0.530642
---
>       max: 255 (1)
>       mean: 238.919 (0.936935)
>       median: 255 (1)
>       standard deviation: 46.5925 (0.182716)
>       kurtosis: 18.2437
>       skewness: -4.34686
>       entropy: 0.291546
40c40
<       min: 2  (0.00784314)
---
>       min: 0  (0)
42,47c42,47
<       mean: 232.894 (0.913309)
<       median: 247 (0.968627)
<       standard deviation: 43.2774 (0.169715)
<       kurtosis: 12.4516
<       skewness: -3.47228
<       entropy: 0.511432
---
>       mean: 238.947 (0.937049)
>       median: 255 (1)
>       standard deviation: 45.0005 (0.176473)
>       kurtosis: 18.9781
>       skewness: -4.38987
>       entropy: 0.3115
49,52c49,52
<       min: 250  (0.980392)
<       max: 250 (0.980392)
<       mean: 250 (0.980392)
<       median: 250 (0.980392)
---
>       min: 255  (1)
>       max: 255 (1)
>       mean: 255 (1)
>       median: 255 (1)
61,582c61,66
<       mean: 234.175 (0.918333)
<       median: 243.5 (0.954902)
<       standard deviation: 31.8977 (0.125089)
<       kurtosis: 9.97856
<       skewness: -2.65763
<       entropy: 0.392899
<   Colors: 256
<   Histogram:
<            458: (0,0,2,250) #000002FA srgba(0,0,2,0.980392)
<            674: (0,0,5,250) #000005FA srgba(0,0,5,0.980392)
<            425: (1,54,151,250) #013697FA srgba(1,54,151,0.980392)
<            156: (2,85,159,250) #028FBFA srgba(251,248,251,0.980392)

... omitting ~200 lines

<            940: (251,249,255,250) #FBF9FFFA srgba(251,249,255,0.980392)
<           1034: (251,250,255,250) #FBFAFFFA srgba(251,250,255,0.980392)
<         124437: (251,251,255,250) #FBFBFFFA srgba(251,251,255,0.980392)
<   Colormap entries: 256
<   Colormap:
<     0: (233,234,244,0.980392) #E9EAF4FA srgba(233,234,244,0.980392)
<     1: (213,213,219,0.980392) #D5D5DBFA srgba(213,213,219,0.980392)
<     2: (169,169,175,0.980392)) #BBBD2EFA srgba(187,189,46,0.980392)

... omitting ~200 lines

<     252: (88,112,24,0.980392) #587018FA srgba(88,112,24,0.980392)
<     253: (171,169,172,0.980392) #ABA9ACFA srgba(171,169,172,0.980392)
<     254: (146,155,48,0.980392) #929B30FA srgba(146,155,48,0.980392)
<     255: (205,185,162,0.980392) #CDB9A2FA srgba(205,185,162,0.980392)
---
>       mean: 242.95 (0.952744)
>       median: 255 (1)
>       standard deviation: 34.6251 (0.135785)
>       kurtosis: 13.8324
>       skewness: -3.27102
>       entropy: 0.226242
584c68
<   Gamma: 0.454545
---
>   Gamma: 0.45455
597c81
<   Page geometry: 1150x366+0+0
---
>   Page geometry: 648x452+0+0
603,605c87,91
<     date:create: 2024-05-13T09:51:37+00:00
<     date:modify: 2024-05-13T09:51:37+00:00
<     date:timestamp: 2024-05-13T10:01:15+00:00
---
>     date:create: 2024-05-13T10:07:05+00:00
>     date:modify: 2024-05-13T10:07:02+00:00
>     date:timestamp: 2024-05-13T10:07:15+00:00
>     png:cHRM: chunk was found (see Chromaticity, above)
>     png:gAMA: gamma=0.45455 (See Gamma, above)
608,609c94,95
<     png:IHDR.color-type-orig: 3
<     png:IHDR.color_type: 3 (Indexed)
---
>     png:IHDR.color-type-orig: 6
>     png:IHDR.color_type: 6 (RGBA)
611,614c97,99
<     png:IHDR.width,height: 1150, 366
<     png:PLTE.number_colors: 256
<     png:tRNS: chunk was found
<     signature: 64c8545df19e3e0625afb3e5bc120af75e3d2818c441dca363c78e40d6066390
---
>     png:IHDR.width,height: 648, 452
>     png:sRGB: intent=0 (Perceptual Intent)
>     signature: e7791ea0d056164a6c9bfe0d53c454a4c5f6147b549ee3aa9b8d421d9c55f686
618,619c103,104
<   Filesize: 58337B
<   Number pixels: 420900
---
>   Filesize: 70302B
>   Number pixels: 292896
621c106
<   Pixels per second: 40.5231MP
---
>   Pixels per second: 44.8047MP
623c108
<   Elapsed time: 0:01.010
---
>   Elapsed time: 0:01.006

[layerssss]

Ah maybe your app CleanShot X is trying to use the colorprofile at the time. Maybe try turning this option off and see if it still changes? To my understanding this option is to automatically change color profile when your ambient light changes. (maybe they detect via camera or other sensors)

[jmuheim]

I stopped CleanShot and tried the same with macOS' screenshot tool. Same problem.

Then I disabled "True Tone" with CleanShot. Same problem.

Then I disabled "True Tone" and tried again with macOS' screenshot tool. Still same problem. 🧐

[layerssss]

That is so wierd. 🥹

I remember years ago I did some work converting images / photos using ImageMagick. If I didn't convert the images' embeded color profiles into standard sRGB to be shown on web. Users will complain about color being "distorted" because of discarding the embeded color profiles (a lot of the Apple RGB, or sometimes even CMKY profiles)

[jmuheim]

I will reach out to CleanShot, maybe they know something we don't. I will keep you posted.

Thanks for your investigations so far! 😊

[layerssss]

I'm sorry I couldn't help. This is beyond my knowledge. Please keep me posted if you find the culprit I would be very keen to know.

[jmuheim]

For the records: by accident I realised that this only seems to happen in Brave, but neither in Chrome, Safari, nor Firefox!

Interesting.

[jmuheim]

I found the problem: it's a tiny security-related extension called Canvas Fingerprint Defender.

I filed a bug there, let's see whether someone can find the root cause. For the time being, I disabled the extension for my web application. I'll keep you up to date!