Hex to UIColor & Android Color

Brand colours usually arrive as hex codes such as #3366CC in a design file or style guide, but native mobile code wants them in other forms: floating-point components on Apple platforms, a 32-bit ARGB number on Android and Flutter. Getting the alpha in the right place is where mistakes happen. This converter takes one hex colour and writes it for every common platform at once.

How a hex colour is built

A six-digit hex colour is three pairs of hexadecimal digits for red, green and blue, each from 00 to FF, which is 0 to 255 in decimal. #3366CC is red 51, green 102 and blue 204. Short three-digit forms double each digit, so #36C is the same colour. An eighth and ninth digit add alpha, the opacity, again from 00 for transparent to FF for opaque. In CSS and in this tool the alpha comes last: #3366CC80 is the same blue at about 50% opacity.

Ranges and alpha order

Platforms disagree in two ways. Apple’s UIKit, SwiftUI and Objective-C APIs take each component as a number from 0 to 1, so 51 becomes 0.2 and 204 becomes 0.8; the converter rounds to three decimals. Android, Jetpack Compose and Flutter pack the colour into one 32-bit integer with alpha first, written 0xAARRGGBB. That is why a fully opaque colour in Flutter is Color(0xFF3366CC) and why writing 0x3366CC there produces an invisible colour with alpha zero.

The outputs

For Apple platforms you get a UIKit UIColor(red:green:blue:alpha:), a SwiftUI Color(red:green:blue:) with opacity added only when the colour is not fully opaque, an Objective-C message and a hex-style line for projects that define a UIColor(rgb:) extension. For Android there is Color.parseColor("#…") for Java and Kotlin views, a colors.xml resource line, and Color(0x…) for Compose. Flutter gets Color(0x…), React Native a hex string or an rgba() string with alpha, and the web a CSS rgb() with slash syntax. .NET and Unity lines round off the set.

A worked example

The Sample button loads #3366CC80. The tool reads RGB 51, 102, 204 with alpha 128, which is 0.502. UIKit becomes UIColor(red: 0.2, green: 0.4, blue: 0.8, alpha: 0.502) and SwiftUI Color(red: 0.2, green: 0.4, blue: 0.8, opacity: 0.502). On Android the alpha moves to the front: Color.parseColor("#803366CC"), and Compose and Flutter both read Color(0x803366CC).

Picking and checking

The colour picker next to the text field sets the RGB part and keeps the alpha you typed, and the swatch shows the result, including transparency, so you can check that the code you copy is the colour you meant before it ends up in a pull request.

Colour spaces

All outputs assume sRGB, the colour space of the web and the default for most code. Wide-gamut displays on recent iPhones and Macs can show Display P3 colours, which design tools sometimes use. If a design specifies P3, use the platform’s P3 initialisers with the P3 values instead; converting hex alone cannot recover colours outside sRGB.

Keeping colours in one place

Rather than scattering literals through the code, define each brand colour once: an asset catalogue colour set on iOS, colors.xml or a Compose theme on Android, and a ThemeData in Flutter. Then this converter is only needed when the palette changes.

Related tools

• Color Converter converts between hex, RGB, HSL and other notations.
• SVG to React Native uses these colours in icons.
• Color Palette Generator builds a palette around a brand colour.
• Image Color Picker takes a hex code from a screenshot.