Jetpack Compose Color Converter

How the conversion works

Jetpack Compose stores a color as a single packed integer written in ARGB order: alpha first, then red, green and blue. That is why a Compose color literal looks like Color(0xFFRRGGBB) — the leading FF is the alpha channel at full opacity. If you only have a standard 6‑digit web hex like #3DDC84, you prepend the alpha byte yourself, and this tool does it for you. Move the alpha slider and the FF is replaced with the matching hex byte, so 50% opacity becomes 0x80.

Drop it straight into your composable

import androidx.compose.ui.graphics.Color

val brand = Color(0xFF3DDC84)

Surface(color = brand) {
    Text("Hello", color = Color.White)
}

Prefer channel floats? The Compose (floats) field gives you Color(red, green, blue, alpha) with each channel in the 0f–1f range, which is handy when you are animating a color or computing it at runtime rather than hard‑coding a literal.

Alpha byte reference

Common opacity values as the leading hex byte: 100% = FF, 75% = BF, 50% = 80, 25% = 40, 10% = 1A, 0% = 00. The slider above computes any value in between.

Contrast and accessibility

The preview shows the WCAG contrast ratio of your color against black and white text, plus whether it passes AA for normal body text (a ratio of at least 4.5:1). Checking this early saves you from shipping a button label nobody can read.

FAQ