Skip to main content

Palette Extraction

AsyncPic automatically extracts a full color palette from every loaded image using the AndroidX Palette library.

Usage​

Pass an onPaletteLoaded callback to receive an AsyncPicPalette object after the image loads:

var dominantColor by remember { mutableStateOf(Color.Gray) }

AsyncPic(
    source = ImageSource.Url("https://example.com/photo.jpg"),
    modifier = Modifier.size(200.dp),
    onPaletteLoaded = { palette ->
        palette.dominant?.let { dominantColor = it }
    }
)

// Use it anywhere — tint a background, a button, etc.
Box(
    modifier = Modifier
        .fillMaxWidth()
        .background(dominantColor.copy(alpha = 0.2f))
)

AsyncPicPalette​

data class AsyncPicPalette(
    val vibrant: Color?,        // Most vivid/saturated color
    val dominant: Color?,       // Most common color
    val muted: Color?,          // Desaturated version of vibrant
    val lightVibrant: Color?,   // Light saturated swatch
    val darkVibrant: Color?     // Dark saturated swatch
)

All fields are nullable — some images may not have enough contrast to produce every swatch.

Example: Dynamic Themed Card​

var cardColor by remember { mutableStateOf(Color(0xFF1E293B)) }
var textColor by remember { mutableStateOf(Color.White) }

Card(
    modifier = Modifier.fillMaxWidth(),
    colors = CardDefaults.cardColors(containerColor = cardColor)
) {
    AsyncPic(
        source = ImageSource.Url("https://example.com/album-art.jpg"),
        modifier = Modifier.fillMaxWidth().height(200.dp),
        onPaletteLoaded = { palette ->
            palette.darkVibrant?.let { cardColor = it }
            palette.lightVibrant?.let { textColor = it }
        }
    )
    Text(
        text = "Album Title",
        color = textColor,
        modifier = Modifier.padding(16.dp)
    )
}

Adaptive Shimmer Morph​

Even without using onPaletteLoaded, AsyncPic internally uses the palette to morph the shimmer color as it loads. The shimmer starts with your shimmerColor, then smoothly transitions to the image's vibrant color over 1000ms before revealing.

This happens automatically with no configuration needed.

Priority Order for Shimmer Morph​

AsyncPic picks the best morph color using this priority:

  1. vibrantSwatch
  2. lightVibrantSwatch
  3. dominantSwatch