Flutter Color Converter

Hex to Flutter Color

Flutter writes a colour as one 32-bit number in the order alpha, red, green, blue. CSS and design tools such as Figma write the alpha last, or leave it out. To turn #1E88E5 into Flutter, put 0xFF (fully opaque) in front of the six digits:

const blue = Color(0xFF1E88E5);          // #1E88E5
const halfBlue = Color(0x801E88E5);      // #1E88E580 in CSS
const sameHalfBlue = Color.fromARGB(128, 30, 136, 229);

An 8-digit code starting with # is read here as CSS/Figma order. Type it with 0x to have it read in Flutter order instead.

The missing 0xFF bug

Color(0x1E88E5) compiles, but its alpha is 0x00, so the colour is fully transparent and the widget seems to disappear. Always write all eight digits. The converter warns when it sees a six-digit Flutter literal.

Opacity in Flutter 3.27 and later

withOpacity, .value, .alpha, .red and .opacity are deprecated. Their replacements:

const c = Color(0xFF1E88E5);

c.withValues(alpha: 0.5);   // instead of c.withOpacity(0.5)
c.withAlpha(128);           // alpha as 0–255
c.toARGB32();               // instead of c.value
(c.a * 255).round();        // instead of c.alpha; c.r, c.g, c.b are 0.0–1.0

Flutter turns an opacity into alpha with round(opacity × 255), so 50% becomes 128 (0x80) and 10% becomes 26 (0x1A). One catch: withValues(alpha: 0.5) stores the exact value 0.5, so it is not == to Color(0x801E88E5), although both have the same toARGB32(). Compare toARGB32() values, or use withAlpha(128), when equality matters.

Parsing a hex string at runtime

For colours that come from an API or a config file as text, a small helper is enough:

/// Parses "#RRGGBB", "RRGGBB" or "#AARRGGBB" (alpha first).
Color colorFromHex(String hex) {
  var digits = hex.replaceFirst('#', '');
  if (digits.length == 6) digits = 'FF$digits';
  return Color(int.parse(digits, radix: 16));
}

String colorToHex(Color color) =>
    '#${color.toARGB32().toRadixString(16).padLeft(8, '0').toUpperCase()}';

It throws a FormatException for anything that is not hex, and it reads 8 digits as alpha first. If your API sends CSS order (#RRGGBBAA), move the last two digits to the front before parsing. For colours in API responses, the JSON to Dart generator builds the rest of the model.

Accepted input

• Hex: #RGB, #RGBA, #RRGGBB, #RRGGBBAA, with or without #
• Flutter: Color(0xAARRGGBB), 0xAARRGGBB, Color.fromARGB(a, r, g, b), Color.fromRGBO(r, g, b, opacity)
• CSS: rgb(), rgba(), hsl() and hsla() in comma or space syntax, and the 148 CSS colour names plus transparent

To turn a whole SVG icon into Flutter drawing code, with its colours converted the same way, use SVG to Flutter CustomPainter.

Limitations

• Material constants such as Colors.blue are not recognised. Their values are listed in the Flutter API docs.
• Colours are sRGB with 8 bits per channel. Wide-gamut colour spaces such as Display P3 are not converted.
• hsl() output is rounded to whole degrees and percent, so converting it back can differ by one in a channel.

All Flutter output was checked on Flutter 3.47.7: 1,304 generated expressions produce the expected toARGB32() value, and flutter analyze reports no deprecation warnings (2026-10-30).