the color picker is picking up differing colors to the actual ones

[rpkoller]

Describe the bug It looks like that the colors the color picker is picking up differ significantly from the actual values in the css

To Reproduce Steps to reproduce the behavior:

1. I've tested on https://www.savethechildren.de
2. Scrolled down to the bottom
3. picked the white from the text as foreground color and the grey from the footer as background color (the grey is solid with no nuances like with the fonts)
4. i've checked the colors with the bookmarklet from tota11y alongside. the only fail in there is the color of the green button
5. picked the background color hex value and added it to https://webaim.org/resources/contrastchecker/ => the color contrasts differs between the 4,74 seen in the tot11y overlay as well as webaim compared to the result pika returns.

*the color is set to hex

Expected behavior i would expect that a solid color is picked up 1:1

Screenshots If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: MacOS 12.6.1
• App Version: 0.0.13 (build 29)
• Architecture: Apple Silicon

[superhighfives]

Hey @rpkoller—this can happen when the colour space that the app you're using is different to the colour space Pika is using (and to make it even more confusing, colour spaces can differ between apps). In the Pika preferences you can change the colour space that Pika uses, which can help fine tune the readings in situations like this.

Would you mind trying some other colour spaces to see if you can match it up?

[rpkoller]

oh THAT i wasn't aware of. on my old computer i had used color contrast analyzer by TPGi. there isnt a version for apple silicon yet even though it is just a electron app. but there i had accurate color picks for solid colors. 1:1 to the colors in the css. but with the information you've provided i've revisited the used color profiles. the computer is an older mbp early 2011. the active color profile color-lcd. with the example from the issue summary i got #737373 and color contrast of 4,7:1 (the contrast is rounded it seems. but). i've switched to another rgb profile like general rgb and adobe rgb both with differing color contrasts. adobe had a contrast of 4,8:1 and the other even higher past 6:1

on my current computer i have a m1pro and an external widescreen by lg. on the mpb i have the p3 color profile same for the lg. i've then went and switched profiles to different rgb profiles on the laptop as well as extern display. but all slighty differing colors ranging around 3.8:1. same for the mbp monitor. i was completely unaware that the color picker is dependent on the monitor and its color profile. here is an example for my external wide screen monitor: https://user-images.githubusercontent.com/1665422/202432315-0287ee95-4e2f-4fb9-a12d-ccc597728dad.mov the odd part the last example has a completely off looking dark and blueish color tone on the screen but in the screenrecording it is displayed like all the other profiles i've set. now i am a little bit confused how

[superhighfives]

Yeah, it's definitely more complicated than it seems. If you access the ColorSync Utility on Mac, you can open the calculator there, which adds an extra dimension by including whether the colour intent is perceptual, relative, based on saturation, or absolute. It's a rabbit hole, that's for sure.

Chrome also allows you to change the colour space, but as long as you match Pika to the display you're picking in (which is what Chrome, for example, uses by default), you should get the same reading: