You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中如何通过十六进制颜色码获取对应颜色名称?

从十六进制颜色码匹配对应颜色名称的解决方案

你的代码已经实现了相机取图并提取中心像素十六进制色值的功能,但无法准确匹配颜色名称的核心问题在于精确匹配十六进制码几乎不可能适配拍摄产生的颜色偏差,以下是具体解决方法:

1. 构建标准颜色映射库

先定义包含常见颜色名称与对应RGB值的数据集(不要用十六进制直接匹配,避免偏差问题):

final Map<String, List<int>> standardColors = {
  '纯红': [255, 0, 0],
  '纯绿': [0, 255, 0],
  '纯蓝': [0, 0, 255],
  '黄色': [255, 255, 0],
  '橙色': [255, 165, 0],
  '紫色': [128, 0, 128],
  '黑色': [0, 0, 0],
  '白色': [255, 255, 255],
  // 可根据需求扩展更多细分颜色
};

2. 实现颜色相似度匹配逻辑

替换你代码中的colorName(_hexCode)函数,通过计算RGB空间的欧几里得距离,找到最接近的标准颜色:

void colorName(String hexCode) {
  // 将十六进制色值转为RGB整数
  int r = int.parse(hexCode.substring(0, 2), radix: 16);
  int g = int.parse(hexCode.substring(2, 4), radix: 16);
  int b = int.parse(hexCode.substring(4, 6), radix: 16);

  String closestColor = '未知颜色';
  double minDistance = double.infinity;

  // 遍历标准颜色库,计算相似度
  standardColors.forEach((name, rgb) {
    double distance = sqrt(
      pow(r - rgb[0], 2) +
      pow(g - rgb[1], 2) +
      pow(b - rgb[2], 2)
    );
    if (distance < minDistance) {
      minDistance = distance;
      closestColor = name;
    }
  });

  _colorName = closestColor;
}

3. 优化匹配精度的小技巧

  • 取区域平均色:不要只取中心单个像素,可提取中心10x10区域的平均RGB值,减少拍摄噪点影响;
  • 设置距离阈值:如果最小距离超过50(可调整),返回“近似[颜色名]”或“未知颜色”,避免匹配误差过大;
  • 扩展颜色库:加入更多细分颜色(如珊瑚红、橄榄绿等),提升匹配的精准度。

你的原代码片段:

Future<void> _getImageAndPickColor() async {
    final pickedFile =
        await ImagePicker().pickImage(source: ImageSource.camera);
    if (mounted) {
      Navigator.pop(context);
    }

    if (pickedFile != null) {
      
      final bytes = await pickedFile.readAsBytes();
      final image = img.decodeImage(Uint8List.fromList(bytes));

      final pixelColor = image!.getPixel(image.width ~/ 2, image.height ~/ 2);

      
        final red = pixelColor.r;
        final green = pixelColor.g;
        final blue = pixelColor.b;

        _pickedColor =
            Color.fromRGBO(red.toInt(), green.toInt(), blue.toInt(), 1);

        _hexCode = _pickedColor.value.toRadixString(16).padLeft(8, '0').substring(2);

        colorName(_hexCode);
       
      
          _searching.text = _colorName;
          print('colorName $_colorName');
          print('hexcode $_hexCode');
          searchFilter(_hexCode);

        //showMyDialogForCamera(context);
    } 
  }

内容的提问来源于stack exchange,提问作者muhammad ahsan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.24 11:17:32