How to Add HEX Color Code to a Compose in Jetpack Compose

Jetpack Compose simplifies UI development for Android, including applying custom colors using HEX color codes (hexadecimal color codes). Whether you're designing vibrant layouts or matching a specific brand palette, this guide explains how to use HEX color codes like #273037 in Jetpack Compose.

Applying Hex Color Code to a Box in Jetpack Compose

To set a background color in Jetpack Compose, you can use the Modifier.background method. Here's how you can apply a hex color like #273037:

Using Color.parseColor()

This approach uses the Android Color class to parse the hex color code and wrap it into a Jetpack Compose Color object.

Example Code:

import android.graphics.Color  
import androidx.compose.foundation.layout.Box  
import androidx.compose.foundation.background  
import androidx.compose.material3.Text  
import androidx.compose.runtime.Composable  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.graphics.Color as ComposeColor  
import androidx.compose.ui.unit.dp  

@Composable  
fun BoxWithHexColor() {  
    Box(  
        modifier = Modifier  
            .background(ComposeColor(Color.parseColor("#273037")))  // Apply hex color  
            .padding(16.dp)  // Optional padding  
    ) {  
        Text(text = "Hello with #273037 color", color = ComposeColor.White)  
    }  
}  

Explanation:

1. Color.parseColor("#273037"): Converts the hex string into an integer color value.
2. ComposeColor(Color.parseColor("#273037")): Wraps the integer into a Jetpack Compose Color object.
3. Modifier.background(): Applies the color to the Box’s background.

This method bridges the Android Color class with Jetpack Compose's Color.

Using Jetpack Compose’s Color Directly

For a simpler and Compose-native approach, you can define the hex color code directly using the Color class provided by Jetpack Compose.

Example Code:

import androidx.compose.ui.graphics.Color  
import androidx.compose.foundation.layout.Box  
import androidx.compose.foundation.background  
import androidx.compose.material3.Text  
import androidx.compose.runtime.Composable  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.unit.dp  

@Composable  
fun BoxWithHexColor() {  
    Box(  
        modifier = Modifier  
            .background(Color(0xFF273037))  // Hex color directly in Compose's Color  
            .padding(16.dp)  
    ) {  
        Text(text = "Hello with #273037 color", color = Color.White)  
    }  
}  

Explanation:

1. Color(0xFF273037): The 0x prefix denotes a hexadecimal value. The first two characters, FF, represent full opacity (alpha channel).
2. Simpler Integration: This method avoids dependency on Android’s Color class, making the code cleaner and more Compose-centric.

Which Method Should You Use?

• Use Color.parseColor() if you’re working with hex color strings at runtime or need compatibility with Android libraries.
• Use Color(0xFF273037) for a more direct and Compose-native solution, especially when colors are predefined.

Conclusion

Adding HFS color codes to Jetpack Compose is straightforward and provides flexibility depending on your development needs. Use Color.parseColor() for runtime conversions or Jetpack Compose’s Color class for static definitions.

With these methods, you can seamlessly integrate hex colors like #273037 into your Compose layouts, enhancing your app’s UI and design consistency.