androidmaterial-designandroid-jetpack-compose-material3material3

How to automatically create tonal palettes and colors for Material3 in Android?


Googles Material3 provides a color system for design consistency throught the app.

I then looked at the Reply sample app provided by Google. It has hardcoded all of the colors as ARGB color ints.

Is there a smarter/simpler way to create palettes using the inbuilt API? i.e. I provide provide the 3 key colours and neutral color and the Materials3 library automatically creates the respective palletes which can be used throughout the app.

Is this possible in Material3?

Cumbersome way

val replyLightPrimary = Color(0xFF825500)
val replyLightOnPrimary = Color(0xFFFFFFFF)
val replyLightPrimaryContainer = Color(0xFFFFDDAE)
val replyLightOnPrimaryContainer = Color(0xFF2A1800)
val replyLightSecondary = Color(0xFF6F5B40)
val replyLightOnSecondary = Color(0xFFFFFFFF)
val replyLightSecondaryContainer = Color(0xFFFADEBC)
val replyLightOnSecondaryContainer = Color(0xFF271904)
val replyLightTertiary = Color(0xFF516440)
val replyLightOnTertiary = Color(0xFFFFFFFF)
val replyLightTertiaryContainer = Color(0xFFD3EABC)
val replyLightOnTertiaryContainer = Color(0xFF102004)
val replyLightError = Color(0xFFBA1B1B)
val replyLightErrorContainer = Color(0xFFFFDAD4)
val replyLightOnError = Color(0xFFFFFFFF)
val replyLightOnErrorContainer = Color(0xFF410001)
val replyLightBackground = Color(0xFFFCFCFC)
val replyLightOnBackground = Color(0xFF1F1B16)
val replyLightSurface = Color(0xFFFCFCFC)
val replyLightOnSurface = Color(0xFF1F1B16)
val replyLightSurfaceVariant = Color(0xFFF0E0CF)
val replyLightOnSurfaceVariant = Color(0xFF4F4539)
val replyLightOutline = Color(0xFF817567)
val replyLightInverseOnSurface = Color(0xFFF9EFE6)
val replyLightInverseSurface = Color(0xFF34302A)
val replyLightPrimaryInverse = Color(0xFFFFB945)

Solution

  • You can use Material theme builder.

    Link

    It will give the Color Configuration automatically.