Flutter中牛仔蓝（#1560BD）对应的ColorFilter矩阵值是什么？

现有代码 #

ColorFiltered(
  colorFilter: const ColorFilter.matrix([
    0.0, 0.0, 0.0, 0.0, 0.0, //
    2.0, 0.0, 0.0, 0.0, 0.0, //
    0.0, 0.0, 3.0, 0.0, 0.0, //
    0.0, 0.0, 0.0, 1.0, 0.0, //
  ]),
  child: Image.asset(
    "assets/step1.png",
    height: 50,
    width: 50,
  ),
),

当前代码输出偏亮的蓝色效果，你需要实现的是**牛仔蓝（#1560BD）**的染色效果，以下是两种常见场景的解决方案：

方案1：保留原图明暗层次的牛仔蓝染色 #

这种方式会提取原图的亮度信息，再映射到牛仔蓝的色调上，更接近你期望的质感。对应的矩阵基于目标颜色RGB归一化值（#1560BD对应RGB(21,96,189)，归一化后为(0.082,0.376,0.741)）和亮度计算公式（0.299R + 0.587G + 0.114B）生成：

ColorFiltered(
  colorFilter: const ColorFilter.matrix([
    0.0245, 0.0481, 0.0093, 0.0, 0.0, // 红色通道：目标红 × 亮度权重
    0.1124, 0.2207, 0.0429, 0.0, 0.0, // 绿色通道：目标绿 × 亮度权重
    0.2216, 0.4350, 0.0845, 0.0, 0.0, // 蓝色通道：目标蓝 × 亮度权重
    0.0,     0.0,     0.0,     1.0, 0.0, // Alpha通道保持不变
  ]),
  child: Image.asset(
    "assets/step1.png",
    height: 50,
    width: 50,
  ),
),

方案2：直接替换为纯牛仔蓝（无明暗保留） #

如果需要将所有非透明像素直接改成纯牛仔蓝，可使用以下矩阵：

ColorFiltered(
  colorFilter: const ColorFilter.matrix([
    0.0, 0.0, 0.0, 0.0, 21.0,  // 红色通道直接设为目标红值
    0.0, 0.0, 0.0, 0.0, 96.0,  // 绿色通道直接设为目标绿值
    0.0, 0.0, 0.0, 0.0, 189.0, // 蓝色通道直接设为目标蓝值
    0.0, 0.0, 0.0, 1.0, 0.0,   // Alpha通道保持不变
  ]),
  child: Image.asset(
    "assets/step1.png",
    height: 50,
    width: 50,
  ),
),

内容的提问来源于stack exchange，提问作者Dasun Dola