36

Our database has colors saved as a String like "#AABBCC" and so I'm basically looking for a function like this: Color.parseColor("#AABBCC"); for Flutter

The Color class requires something like this Color(0xFF42A5F5) so I need to convert "#AABBCC" to 0xFFAABBCC

6 Answers 6

86
/// Construct a color from a hex code string, of the format #RRGGBB.
Color hexToColor(String code) {
  return new Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
}
Sign up to request clarification or add additional context in comments.

1 Comment

what if I want add opacity/alpha like #AARRGGBB or #RRGGBBAA?
17

I'm using this function in my project which handles converting the hex string to a Color.

Color hexToColor(String hexString, {String alphaChannel = 'FF'}) {
  return Color(int.parse(hexString.replaceFirst('#', '0x$alphaChannel')));
}

The idea here is that now you can pass this function a hex string which is something like this '#ffffff' in addition to that you can pass an alpha channel. What alpha channel does is it handles the opacity of your color and you can pass it to Color directly.

About alpha channels the FF part is a hex representation of 0-100 is like:

0 = 00 1 = 03 2 = 05 ... 9 = 17 ... 10 = 1A 11 = 1C 12 = 1F ... 99 = FC 100 = FF

Let's assume you want to convert #000000 into a Color and have a 0.1 opacity on it. You can simply call this function like this:

hexToColor('#000000', alphaChannel: '1A');

And if you just call it like this:

hexToColor('#000000');

Then it will only return you a black color with 1 opacity. Hope this will help to anyone wondering how to handle opacity and color handling a bit more further.

1 Comment

now you can use this as String extension dart.dev/guides/language/extension-methods So you can call the function as myStrVar.hexToColor() where myStrVar is the #000000 of your example
5

A simple string replacement would get it in the right syntax:

String html_colour = '#AAABBCC';
String fixed_colour = html_colour.replace(new RegExp(r'#'), '0xFF');

That should do it.

1 Comment

Would still end up with a string, we need an int
5

I ended up doing it this way:

hexStringToHexInt(String hex) {
  hex = hex.replaceFirst('#', '');
  hex = hex.length == 6 ? 'ff' + hex : hex;
  int val = int.parse(hex, radix: 16);
  return val;
}

Comments

2

first define this extention

extension HexToColor on String {
  Color hexToColor() {
    return Color(
        int.parse(toLowerCase().substring(1, 7), radix: 16) + 0xFF000000);
  }
}

then use it where needed

Color color = hexStr.hexToColor()

Comments

1

This can be done using a function-

toColor(String hex) {
    var hexColor = hex.replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF" + hexColor;
    }
    if (hexColor.length == 8) {
      return Color(int.parse("0x$hexColor"));
    }
  }

You can pass your string in this function and it will return the color to you,

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.