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 is pretty straight forward, here's some examples(you also need to import 'androidx.compose.ui.graphics.Color'):
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!
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.
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
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.