Skip to content
DeveloperMemos

Using Hex Colors in Jetpack Compose

Android, Jetpack, Compose, Kotlin1 min read

The Color class in Jetpack Compose is really handy for using a preset set of colors in a project, but sometimes you might need to use a custom color in your UI.

Using common colors

Using common colors is pretty straight forward, here's some examples(you also need to import 'androidx.compose.ui.graphics.Color'):

1Color.Black
2Color.Red
3Color.Green

So what about using hex codes?

Using hex codes(passing as a hexadecimal)

So for example say that you want to use '#03DAC5', which is actually a green/teal color that you get in the template for an empty Compose project. This is how it is defined in the template:

1val Teal200 = Color(0xFF03DAC5)

You can just append the hex code you want to use after '0xFF', so for red(#FF0000) it would look like this:

1val Red = Color(0xFFFF0000)

This method works okay if you aren't too concerned about how things look. You also get a little preview of the color to the left in the code editor which is nice.

Creating an extension

Another option is to create an extension to parse the color. You can do this using android.graphics.Color.parseColor. Here's an example of an extension adding a toColor method to String:

1fun String.toColor() = Color(android.graphics.Color.parseColor(this))

This parses the color code using android.graphics.Color and then converts it to a Compose Color. And this is how you would use it for the green/teal color I mentioned above:

1val Teal200 = "#03DAC5".toColor()

Things do look a little nicer with the extension but the downside is that Android Studio no longer gives you a preview of the color on the side like it does when you pass the value as a hexadecimal.