How do I use hexadecimal color strings in Flutter?

How do I convert a *hexadecimal color string* like **`#b74093`** to a `Color` in Flutter?

I want to use a HEX color code in Dart.

`"#b74093"`? OK...

### To HEX Recipe

int getColorHexFromStr(String colorStr)
{
colorStr = "FF" + colorStr;
colorStr = colorStr.replaceAll("#", "");
int val = 0;
int len = colorStr.length;
for (int i = 0; i < len; i++) {
int hexDigit = colorStr.codeUnitAt(i);
if (hexDigit >= 48 && hexDigit <= 57) {
val += (hexDigit - 48) * (1 << (4 * (len - 1 - i)));
} else if (hexDigit >= 65 && hexDigit <= 70) {
// A..F
val += (hexDigit - 55) * (1 << (4 * (len - 1 - i)));
} else if (hexDigit >= 97 && hexDigit <= 102) {
// a..f
val += (hexDigit - 87) * (1 << (4 * (len - 1 - i)));
} else {
throw new FormatException("An error occurred when converting a color");
}
}
return val;
}

A simple function without using a class:


Color _colorFromHex(String hexColor) {
final hexCode = hexColor.replaceAll('#', '');
return Color(int.parse('FF$hexCode', radix: 16));
}

You can use it like this:

Color color1 = _colorFromHex("b74093");
Color color2 = _colorFromHex("#b74093");

Add this function in your file -

```

Color parseColor(String color) {
String hex = color.replaceAll("#", "");
if (hex.isEmpty) hex = "ffffff";
if (hex.length == 3) {
hex = '${hex.substring(0, 1)}${hex.substring(0, 1)}${hex.substring(1, 2)}${hex.substring(1, 2)}${hex.substring(2, 3)}${hex.substring(2, 3)}';
}
Color col = Color(int.parse(hex, radix: 16)).withOpacity(1.0);
return col;
}
```

And use it like -


```
Container(
color: parseColor("#b74093")
)
```

You can use this

Color getColorFromColorCode(String code){
return Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
}

To convert from a hexadecimal string to integer, do:

int hexToInt(String hex)
{
int val = 0;
int len = hex.length;
for (int i = 0; i < len; i++) {
int hexDigit = hex.codeUnitAt(i);
if (hexDigit >= 48 && hexDigit <= 57) {
val += (hexDigit - 48) * (1 << (4 * (len - 1 - i)));
} else if (hexDigit >= 65 && hexDigit <= 70) {
// A..F
val += (hexDigit - 55) * (1 << (4 * (len - 1 - i)));
} else if (hexDigit >= 97 && hexDigit <= 102) {
// a..f
val += (hexDigit - 87) * (1 << (4 * (len - 1 - i)));
} else {
throw new FormatException("Invalid hexadecimal value");
}
}
return val;
}

Call example:

Color color = new Color(hexToInt("FFB74093"));

In Flutter, to create a color from RGB with alpha, use:

return new Container(
color: new Color.fromRGBO(0, 0, 0, 0.5),
);

How to use hexadecimal color:

return new Container(
color: new Color(0xFF4286f4),
);
// 0xFF -> the opacity (FF for opaque)
// 4286f4 -> the hexadecimal color

Hexadecimal color with opacity:

return new Container(
color: new Color(0xFF4286f4).withOpacity(0.5),
);

// Or change the "FF" value

```lang-none
100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00
```

For more, see the official documentation page, *[Color class - dart:ui library - Dart API][1]*.

[1]:

[To see links please register here]

### File *utils.dart*

///
/// Convert a color hex-string to a Color object.
///
Color getColorFromHex(String hexColor) {
hexColor = hexColor.toUpperCase().replaceAll('#', '');

if (hexColor.length == 6) {
hexColor = 'FF' + hexColor;
}

return Color(int.parse(hexColor, radix: 16));
}

### Example usage

Text(
'Hello, World!',
style: TextStyle(
color: getColorFromHex('#aabbcc'),
fontWeight: FontWeight.bold,
)
)

Easy way:

String color = yourHexColor.replaceAll('#', '0xff');

Usage:

Container(
color: Color(int.parse(color)),
)

For general reference. There is a simpler way using the library **Supercharged**. Although you can use extension methods with all solutions mentioned, you find practical user library toolkit.

"#ff00ff".toColor(); // Painless hex to color
"red".toColor(); // Supports all web color names

Easier, right?

[Supercharged][1]

[1]:

[To see links please register here]