Are material colors defined somewhere in Compose? ...

# compose

[Marcin Wisniowski]

Are material colors defined somewhere in Compose? For example I want to get "Red500". Or do I need to define them myself?

[Chris Sinco [G]]

Like all the Material colors from the 2014 palette?

[Marcin Wisniowski]

Yes. For example the Material icons are available in Icons, so I would expect that the colors are somewhere too, but I can't find them. But since you specified 2014, is there a different one?

[Chris Sinco [G]]

Gotcha. The 2014 Material colors palette can still be used today if you'd like. All the values are listed here: https://material.io/design/color/the-color-system.html#tools-for-picking-colors

[Chris Sinco [G]]

They are not available in code in Compose because they are not really meant to be referenced like a stable Android "resource". The 2014 palette was generated to help developers pick colors, but over time, it was used less and less, and we encouraged folks to really use their own colors. The semantics, e.g. Red500, also don't really make sense over time because that was scoped to how Material built their color scales. For example, 500 only has meaning because there's 300 and 400 in the scale. But that scale doesn't scale (blob smile happy) to every color system and is not meant to represent the color scale for the Android platform.

[Chris Sinco [G]]

Which is why in Material3 / Material You, there is no set color palette to pick from, and instead color palettes can be generated dynamically either by using dynamic colors from Android 12+ or creating one using the Material Theme Builder. They are also now tonal palettes because the color system is more based on usage semantics (primary, secondary, tertiary, etc) than actual colors. Example of generated color palette below:

[Chris Sinco [G]]

But if you are looking to use colors directly from the 2014 palette, we do have them at least built into the Studio Color Picker. It will insert the raw hex value though, and not a hard reference to a known constant.

[Chris Sinco [G]]

FWIW overall the Material Icons are available in Compose because we know based on data that many designers/developers rely on the icon set for icons in their production apps. For color, this is not the case, and as mentioned before, going forward the Material team wants to encourage folks to use their own colors, e.g. brand colors, instead of the Material 2014 palette.

[Colton Idle]

Can't believe you used Material and 2014 in the same sentence. Has it really been that long? Time freakin flies.

[Chris Sinco [G]]

Ha well there's only been developer libraries since I think 2015. But yeah Material1 has the original 2014 color palette, 2018ish was Material2 (Material Theming) that introduced color/shape/typography as the core pillars, and now Material3 (Material You) in 2021 that evolves color/shape/typography with dynamic color, more color semantics, more interesting shapes, adaptive guidance, and likely more to come in 2022.

[Marcin Wisniowski]

Is this: https://material.io/resources/color/
Not the most up to date tool then? It still references the same color palette. The Compose Colors class doesn't use the M3 naming (e.g. tertiary color), so it's difficult to use. Material Theme Builder is nice but again, until Compose supports that color system it doesn't feel worth it to migrate to it.
I understand designers are supposed to pick their own colors. I'm just approaching this from a personal project perspective where I am not a designer, and when Material Design came out it really helped me make my apps look cohesive as long as I followed the guidelines, and the colors are a part of it. I don't have any color theory knowledge and the Material Design palette, again, offers sensible choices that work fine.
But yeah, absolutely not an issue to put the colors in yourself, especially with the Android Studio color picker like you said. Thanks for the insight.

[Chris Sinco [G]]

Is this: https://material.io/resources/color/ Not the most up to date tool then? It still references the same color palette.

Yes, it is not up-to-date. It’s still maintained on the Material site, but there’s been a couple other color tools that have emerged since.

[Chris Sinco [G]]

The Compose Colors class doesn’t use the M3 naming

Yes, the current Compose Material library (androidx.compose.material:material) is using the M2 color keys, which is considered stable. If you want to use the color keys from Material Theme Builder, they are intended to be used in the Material3 system, so you would have to use the Material3 Compose library (androidx.compose.material3:material3), though it’s still in alpha so things can/will change.

[Chris Sinco [G]]

I don’t have any color theory knowledge and the Material Design palette, again, offers sensible choices that work fine.

Yep definitely makes sense! The 2014 color palette was designed just for that but over time many developers started to rely on the exact colors coming from Material that all apps started to look the same. So Material Theming (M2) was an attempt to encourage designers/developers to not rely on Material colors directly. I see no reason not to use the 2014 colors if it helps you find great colors with minimal effort. Just know that we will not ship constants in libraries that you can depend on in code — hence the current approach of copy/paste. 😞

[Chris Sinco [G]]

FWIW I recently used the Material Theme Builder on a personal app to generate a nice palette but I instead copied the color values to my own constants in my projects, then mapped those to the Compose Material2 color keys since I’m not using Material3 yet. For things like tertiary since Material2 doesn’t have it, I made some small extensions to MaterialTheme in Compose that made it possible without having to adopt the Material3 library: https://developer.android.com/jetpack/compose/themes/custom#extending-material