Flutter Color Converter

How to use this tool

Enter #RRGGBB, rgb(r, g, b), or Color(0xAARRGGBB). For HEX or RGB, select alpha from 0 to 255.

Example

Input

#2196F3, alpha 255

Output

Color(0xFF2196F3)
const Color(0xFF2196F3)

What does this tool do?

Flutter Color integer literals use AARRGGBB order. The first byte controls opacity, followed by red, green and blue. FF means fully opaque; 00 means fully transparent.

Common mistakes and limitations

CSS eight-digit HEX is RRGGBBAA, while Flutter uses AARRGGBB. This tool accepts six- or three-digit CSS HEX and explicit Flutter literals to avoid that ambiguity.

Read 0xAARRGGBB from left to right

Flutter’s integer Color constructor uses eight hexadecimal digits after 0x: alpha, red, green and blue. FF means fully opaque because it is 255 in decimal; 00 is fully transparent. A six-digit web color needs an alpha prefix, not an alpha suffix. Passing 0x2196F3 without FF places zeros in the high alpha byte and can produce an invisible color even though the RGB digits look correct.

const Color(0xFF2196F3) // opaque blue
const Color(0x802196F3) // about 50.2% opacity
const Color(0x002196F3) // transparent blue

Move between web colors and Flutter code

Paste #2196F3, an accepted RGB/HSL value, or an existing Color(0xAARRGGBB) expression. For web RGB input, the alpha control supplies the separate opacity byte. For a Color literal, the existing alpha is extracted. The returned HEX value describes RGB channels; inspect the separately reported alpha so transparency is not lost when moving back into CSS. CSS eight-digit HEX typically uses RRGGBBAA, which is a different order.

rgb(33, 150, 243) → Color(0xFF2196F3)
Color(0x802196F3) → #2196F3 with alpha 128

Use a constructor that makes intent clear

A literal color can be written as const Color(0xFF2196F3). Color.fromARGB(255, 33, 150, 243) expresses the same channel choices using decimal numbers. Alpha is opacity rather than transparency: larger numbers reveal more of the foreground color. Half opacity is rounded into an integer byte, so 128/255 is not exactly 0.5. Use a named design token in your application instead of repeating unexplained numeric literals throughout many widgets.

const Color.fromARGB(255, 33, 150, 243)
// In a decoration:
BoxDecoration(color: const Color(0xFF2196F3))

Combine color with layout deliberately

Color conversion is one part of a component specification. Pair the result with EdgeInsets for internal spacing, BorderRadius for the decorated shape and BoxShadow for depth. A correct literal does not guarantee accessible contrast or a suitable dark-theme appearance. Check text on the actual background and review selected, disabled and focused states. The converter supplies syntax and channel values; your theme determines how those values should be used.

Check both syntax and the widget context

A color may be correct but appear different because it is blended over another surface, tinted by a theme or drawn with additional opacity. First inspect the generated alpha, then inspect the widget that consumes it. When converting a design palette, name colors by role such as surface or accent instead of treating every literal as a permanent semantic meaning. Theme overrides can then change those roles without rewriting each widget.

Frequently asked questions