Hello! I'm having no luck tracking down a Color is...

# compose

[thisischris]

Hello! I'm having no luck tracking down a Color issue so I'm throwing a question out to the masses. I'm setting a hex code background to a Material button but I'm not getting that color when I run the app. For example, I'm using drawWithContent to draw a rect with the color Red:

Color(red = 255, green = 0, blue = 0),

But when I run the app, the resulting rbg value is: red:231, green:45, blue:32.

I've tried removing elevation from the button, switching from Material 2 to material 3, capturing from a physical phone vs emulator but it's always off.

I'd love any ideas for what else I could check. I've been doing android dev for a long time and I've never run into this. Thanks!

[romainguy]

How do you verify the resulting color exactly?

[thisischris]

I've tried the Digital Color Meter mac app and the Figma eyedropper tool

[romainguy]

Ah yeah so I have a doc for you

[thisischris]

And for a source, either the emulator screen or taking a screenshot in Android Studio and checking the png

[romainguy]

Welcome to the wonderful world of color management and color spaces: https://docs.google.com/document/d/12W-n3nTl6C8-SyeP_trvKBXQirMLmvsGGl3yUlQsHaQ/edit#heading=h.vks9e22yqulu

[romainguy]

Just do what the doc says, otherwise you will likely not be checking what you think you are checking

[thisischris]

Reading now, will report back!

[thisischris]

I'm probably missing something but I've got the color meter set to sRGB, the screenshot saved from Android Studio -> Take Screenshot has a ColorSync profile of sRGB but I'm still getting an a not-full-red color value

[thisischris]

I tried removing the monitor from the equation and it's the same results on my laptop screen (mbpro m3)

[romainguy]

Don’t inspect through Android Studio, there have been color management issue with the JVM in the past

[romainguy]

open your screenshot in Preview instead

[thisischris]

That's actually what I've been doing

[thisischris]

I just used AS for the screenshot above so I could show the code as well

[thisischris]

image.png

[romainguy]

Can you send me the screenshot please?

[thisischris]

red_laptop.png

[romainguy]

That screenshot doesn’t have a color profile. How did you generate it?

[thisischris]

The "Take screenshot" command in Android Studio

[romainguy]

Emulator or device?

[thisischris]

Device

[thisischris]

Ah so the "sRGB built-in" shown in Preview isn't what it should show for the profile?

[romainguy]

k so your screenshot is in wide gamut (P3) for some reason

[romainguy]

but not tagged as such

[romainguy]

when converting the value to sRGB it is 1,0,0

[romainguy]

Preview shows me no profile in that screenshot

[thisischris]

Ahah! I took a screenshot via the device physical keys and sent that to myself

[romainguy]

ah there you go

[thisischris]

It reports the Color profile differently now

[romainguy]

so if I assign the proper profile it works

[romainguy]

Like so:

[romainguy]

You are running into what’s so hard about color management: every single step in the chain needs to be correct otherwise you don’t get the right color or think you don’t get the right color 😕

[thisischris]

Does the monitor affect the way Android Studio captures screenshots? I'm guessing not, I got the same results when I captured with no monitor

[thisischris]

But I am using an OLED tv for a monitor so I wouldn't be surprised if that's confusing things

[thisischris]

Can I ask how you assigned the proper profile? Just to make sure I can reproduce this if I run into it again

[romainguy]

not when you use the take screenshot button

[romainguy]

if you take a screenshot with macOS, then yes

[romainguy]

being an OLED TV doesn’t matter

[romainguy]

macOS takes screenshots in the color space of the display, which is basically never sRGB

[romainguy]

I assigned the profile using ColorSync Utility (File > Open, choose your image, then at the bottom pick assign profile, should be explained in the doc)

[romainguy]

You can also use Photoshop or Affinity Photo for this

[thisischris]

I was thinking that the "Take Screenshot" in Android Studio would just trigger the same command as the physical screenshot keys via adb. I'm surprised to see that they end up with different values

[romainguy]

Depends what the device does 🤷

[romainguy]

If it’s a non-Pixel phone, who knows what the OEM did there

[thisischris]

I tried assigning the profile in ColorSync but it doesn't have an entry for "Display P3 with sRGB Transfer"

[romainguy]

I personally made sure the screenshot command used by Studio would produce the proper files (but that was years ago)

[thisischris]

The closest was "Display P3" but that resulted in the same color value

[romainguy]

Display P3 is “Display P3 with sRGB Transfer”

[romainguy]

it’s a dumb name, because Display P3 means “sRGB Transfer”

[romainguy]

Display P3 is the gamut of DCI-P3 with the transfer function of sRGB

[romainguy]

(hence the name Display P3)

[romainguy]

Make sure you assign and don’t match

[thisischris]

Ahh that's what I missed. I was still on Match

[thisischris]

Thanks so much for this troubleshooting! I spent several hours on it this weekend so it's great to have a resolution

[thisischris]

Of course I was on the wrong track for most of it thinking that the new elevation color stuff in Material might be messing with things

[romainguy]

😄

[romainguy]

I would recommend you watch my talk on colors:

https://www.youtube.com/watch?v=r8NeG0wmFXM▾

[thisischris]

🙏 Thanks!

[dewildte]

This was a great read!
I love Romain!