androidmaterial-designandroid-jetpack-compose-material3

Buggy color in Jetpack Compose (FAFAFA)


I have a card in Jetpack Compose on which I set the container color to 0xFFFAFAFA, (250, 250, 250). Now this color is light grey but for me it's bluish. Why could that be?

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(8.dp)
        .clickable { onClick() },
        colors = CardDefaults.cardColors().copy(containerColor = Color(color = 0xFFFAFAFA))
    ) {
          ....
      }

Solution

  • It's not a bug, it's a feature ;)

    Material3 introduces a concept called Tonal Elevation. Summarized shortly: Surface color may change depending on elevation.

    And since your card has elevation, your card color changes.

    See the compose theming tutorial section Tonal and shadow elevations for more explanation.

    This behavior is also stated in the documentation:

    CardElevation used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is ColorScheme.surface, this controls the amount of primary color applied as an overlay. See also: Surface.