Using Hex Colors in Jetpack Compose

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'):

Copycopy code to clipboard
1Color.Black
2Color.Red
3Color.Green

So what about using hex codes?

Psst! By the way, I wrote another article a little while back about how to run some code with a delay using LaunchedEffect in Jetpack Compose. If you're interested in Compose feel free to check it out!

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:

Copycopy code to clipboard
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:

Copycopy code to clipboard
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:

Copycopy code to clipboard
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:

Copycopy code to clipboard
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.