Flutter convert Color to hex string - dart

Question

How can I convert a flutter Color class instance into a hex string?
For example, I would like to convert Colors.blue to what would be '#4286f4'.
Usecase is letting the user choose a color and save it in the database as a hex color.
I have checked related questions and they are for converting the other way around.

Answer 1

You can convert the value property (includes alpha) or the individual red, green, and blue properties to Hex using int.toRadixString(16):
var myColor = Colors.blue;
var hex = '#${myColor.value.toRadixString(16)}';

Answer 2

This is what I'm using:
extension ColorX on Color {
String toHexTriplet() => '#${(value & 0xFFFFFF).toRadixString(16).padLeft(6, '0').toUpperCase()}';
}
Sample outputs: #00FFFF or #FF69B4
This code also makes sure that alpha is omitted (#bakua's comment)
Some Flutter source code inspiration: util.dart, painting.dart

Answer 3

You can add an extension to Color class to get HexString from the Color object itself directly.
extension HexColor on Color {
/// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
'${alpha.toRadixString(16).padLeft(2, '0')}'
'${red.toRadixString(16).padLeft(2, '0')}'
'${green.toRadixString(16).padLeft(2, '0')}'
'${blue.toRadixString(16).padLeft(2, '0')}';
}
Color color = Colors.blue ;
print(color.toHex());

Answer 4

This is my favorite way of handling color to string conversions. I use this really simple extension class.
extension HexColor on Color {
/// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".
static Color fromHex(String hexString) {
final buffer = StringBuffer();
if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
buffer.write(hexString.replaceFirst('#', ''));
return Color(int.parse(buffer.toString(), radix: 16));
}
/// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
'${red.toRadixString(16).padLeft(2, '0')}'
'${green.toRadixString(16).padLeft(2, '0')}'
'${blue.toRadixString(16).padLeft(2, '0')}'
'${alpha.toRadixString(16).padLeft(2, '0')}';
}

Answer 5

Though the question is converting Color to Hex, if you want to store and retrieve Color information, I've used like this.
Save color data as int. Colors.blue.value
Retrieve data as int and pass it to Color class Color(savedInt)

Answer 6

In flutter if AA is the alpha value in hex, RR the red value in hex, GG the green value in hex, and BB the blue value in hex, a color can be expressed as const Color(0xAARRGGBB) just remove the leading two symbols to get HEX value. RRGGBB

Answer 7

Improved Code:
extension HexColor on Color {
String _generateAlpha({required int alpha, required bool withAlpha}) {
if (withAlpha) {
return alpha.toRadixString(16).padLeft(2, '0');
} else {
return '';
}
}
String toHex({bool leadingHashSign = false, bool withAlpha = false}) =>
'${leadingHashSign ? '#' : ''}'
'${_generateAlpha(alpha: alpha, withAlpha: withAlpha)}'
'${red.toRadixString(16).padLeft(2, '0')}'
'${green.toRadixString(16).padLeft(2, '0')}'
'${blue.toRadixString(16).padLeft(2, '0')}'
.toUpperCase();
}
Usage:
pickerColor.toHex(withAlpha: true);