Make a color darker in Compose

Hey there👋
In this short article, I will quickly show you how to make a color darker in Jetpack Compose.

You can add this simple extension function to your project:

inline fun Color.darken(darkenBy: Float = 0.3f): Color {
    return copy(
        red = red * darkenBy,
        green = green * darkenBy,
        blue = blue * darkenBy,
        alpha = alpha
    )
}

The darkenBy parameter allows you to change the strength of the color dimming from 0f to 1.0f

Here is a result:

darken() called on Color.Red with the darkenBy 0.3f

The first box is Color.Red and the second one Color.Red.darken()

Here are examples with different values of darkenBy parameter:

darken() called on Color.Red with different darkenBy values

This extension is handy when creating items with content and background colors where the background color has to be a darker version of the content color:

You can also swap the colors to indicate that the item is selected using the same content color + a darkened version of the content color:

That’s it! I would appreciate it if you would leave a Clap-Clap.
Stay tuned for new posts and see you later!