Hex to Jetpack Compose Color
Convert a hex color like #2563EB into Android Jetpack Compose's Color(0xFF2563EB) syntax — an ARGB hex Long ready to paste into Kotlin.
How Hex to Jetpack Compose Color Conversion Works
Android Jetpack Compose's Color constructor takes a single hex Long in 0xAARRGGBB order — alpha byte first, then red, green, blue. This tool prepends FF for a fully opaque alpha byte to your 6-digit hex code and formats the result as a ready-to-paste Color(0xAARRGGBB) call for Kotlin.
Hex to Jetpack Compose Color Example, Step by Step
#2563EB = Color(0xFF2563EB)
#2563EB (hex) = Color(0xFF2563EB) (Jetpack Compose)
Hex input: 2563EB Prepend opaque alpha byte: FF Combine: 0xFF2563EB
| Step | Description | Result |
|---|---|---|
| Take the hex code | #2563EB -> 2563EB | 2563EB |
| Prepend the alpha byte | FF = fully opaque | FF2563EB |
| Format as a Kotlin hex Long | prefix with 0x | 0xFF2563EB |
| Wrap in the Color constructor | Color(0xAARRGGBB) | Color(0xFF2563EB) |
The alpha byte always comes first in Compose's ARGB Long, the opposite order from CSS rgba(), which puts alpha last.
Common Mistakes With Hex to Jetpack Compose Color
- Forgetting the alpha byte entirely and passing a 6-digit hex Long, which Compose won't interpret as intended.
- Mixing up ARGB order with RGBA, putting the alpha byte last instead of first.
- Omitting the 0x prefix, which is required for Kotlin to parse the value as a hexadecimal Long.
Frequently Asked Questions
How does hex map to a Jetpack Compose Color?
Jetpack Compose's Color constructor takes a single 0xAARRGGBB hex Long — alpha byte first, then red, green, blue. This tool prepends FF (fully opaque) to your hex code and formats it as Color(0xFF2563EB).
What's the Jetpack Compose value of #2563EB?
Color(0xFF2563EB) — FF is the opaque alpha byte, followed by the original 2563EB red-green-blue bytes.
Can I paste this directly into Kotlin code?
Yes, the output is valid Kotlin syntax for the Jetpack Compose Color constructor and can be used directly in a composable.
Why does alpha come first instead of last?
Compose's Color(Long) constructor follows the ARGB convention (alpha, red, green, blue), the opposite order from CSS rgba(), which puts alpha last.
Does this tool convert Jetpack Compose Color back to hex too?
Not currently — this is a one-way, hex-to-Compose conversion. For the reverse direction, drop the leading FF alpha byte and treat the remaining 6 digits as a standard hex code.