Skip to content

Instantly share code, notes, and snippets.

@whiplashoo
Created April 23, 2021 08:23
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save whiplashoo/afe1c8e542c6bf8e8b2659eb9d9a4071 to your computer and use it in GitHub Desktop.
Save whiplashoo/afe1c8e542c6bf8e8b2659eb9d9a4071 to your computer and use it in GitHub Desktop.
Convert a hex, rgba, or rgb color string to Color object in Dart
import 'dart:ui';
import 'package:flutter/material.dart';
// Converts a hex, rgb, or rgba color string to Color object. Works with opacity values as well.
// e.g.:
// "#000" -> Color(0xff000000)
// "#cc3333" -> Color(0xffcc3333)
// "#cc3333dd" -> Color(0xddcc3333)
// "rgb(204, 44, 81)" -> Color(0xffcc2c51)
// "rgba(204, 44, 81, 0.20)" -> Color(0x33cc2c51)
// "rgba(204, 44, 81, 0.80)" -> Color(0xcccc2c51)
// Check more examples in test.dart
Color hexOrRGBToColor(String colorStr) {
RegExp hexColorRegex = RegExp(r'^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$');
if (colorStr.startsWith("rgba")) {
List rgbaList = colorStr.substring(5, colorStr.length - 1).split(",");
return Color.fromRGBO(
int.parse(rgbaList[0]), int.parse(rgbaList[1]), int.parse(rgbaList[2]), double.parse(rgbaList[3]));
} else if (colorStr.startsWith("rgb")) {
List rgbList = colorStr.substring(4, colorStr.length - 1).split(",").map((c) => int.parse(c)).toList();
return Color.fromRGBO(rgbList[0], rgbList[1], rgbList[2], 1.0);
} else if (hexColorRegex.hasMatch(colorStr)) {
if (colorStr.length == 4) {
colorStr = colorStr + colorStr.substring(1, 4);
}
if (colorStr.length == 7) {
int colorValue = int.parse(colorStr.substring(1), radix: 16);
return Color(colorValue).withOpacity(1.0);
} else {
int colorValue = int.parse(colorStr.substring(1, 7), radix: 16);
double opacityValue = int.parse(colorStr.substring(7), radix: 16).toDouble() / 255;
return Color(colorValue).withOpacity(opacityValue);
}
} else if (colorStr.isEmpty) {
throw UnsupportedError("Empty color field found.");
} else if (colorStr == 'none') {
return Colors.transparent;
} else {
throw UnsupportedError("Only hex, rgb, or rgba color format currently supported. String: $colorStr");
}
}
import 'package:flutter/material.dart';
import 'package:test/test.dart';
void main() {
group('Hex or RGB string to Color', () {
test('Can convert hex #cc3333 to Color', () {
expect(hexOrRGBToColor("#cc3333"), Color(0xffcc3333));
});
test('Can convert hex #000 to Color', () {
expect(hexOrRGBToColor("#000"), Color(0xff000000));
});
test('Can convert hex #ffffff to Color', () {
expect(hexOrRGBToColor("#ffffff"), Color(0xffffffff));
});
test('Can convert rgba rgba(255,255,255,0) to Color', () {
expect(hexOrRGBToColor("rgba(255,255,255,0)"), Color(0x00ffffff));
});
test('Can convert rgba rgba(32,33,36,0.55) to Color', () {
expect(hexOrRGBToColor("rgba(32,33,36,0.55)"), Color(0x8c202124));
});
test('Can convert hex #2021248c to Color', () {
expect(hexOrRGBToColor("#2021248c"), Color(0x8c202124));
});
test('Can convert hex #cc2c512e to Color', () {
expect(hexOrRGBToColor("#cc2c512e"), Color(0x2ecc2c51));
});
test('Can convert rgba rgba(204,44, 81, 0.20) to Color', () {
expect(hexOrRGBToColor("rgba(204,44, 81, 0.20)"), Color(0x33cc2c51));
});
test('Can convert rgba rgba(204,44, 81, 0.80) to Color', () {
expect(hexOrRGBToColor("rgba(204,44, 81, 0.80)"), Color(0xcccc2c51));
});
test('Can convert rgb rgb(204,44, 81) to Color', () {
expect(hexOrRGBToColor("rgb(204,44, 81)"), Color(0xffcc2c51));
});
test('Can convert rgb rgb(32,33, 36) to Color', () {
expect(hexOrRGBToColor("rgb(32,33, 36)"), Color(0xff202124));
});
}
@waqadArshad
Copy link

Thanks a bunch. Appreciate it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment