如何实现基于RGB或十六进制色值的颜色搜索功能？

1. 数据库字段预处理 #

在现有Firestore存储的RGB字段基础上，新增两类字段，提前在服务端写入数据时同步计算完成，不影响现有业务逻辑：

• 存储CIELAB色彩空间三个分量值：l/a/b，该色彩空间的数值差异和人眼感知的颜色差异线性相关，比直接计算RGB差值的匹配精度高很多
• 存储color_tags数组字段：提前维护140种标准Web命名颜色的映射表，写入颜色时计算当前RGB对应的最近1~3个标准颜色名，存入该数组，用来支持文本名称搜索

2. 搜索逻辑实现 #

按用户两种输入场景分别处理：

场景1：用户输入颜色名称搜索 #

• 前端先对用户输入做匹配，映射到对应的标准颜色名和标准RGB值
• 先通过Firestore数组查询过滤候选集：where('color_tags', 'array-contains', 匹配到的标准颜色名)，该查询走数据库索引，性能很高
• 对过滤出来的候选集做色差计算，按匹配度排序后返回前N条结果即可

场景2：用户输入十六进制色值/通过选色器选色搜索 #

• 前端先把用户输入的十六进制色值转为RGB，再计算对应的CIELAB分量值
• 按数据量大小选对应实现方案：
  • 数据量小于10万条：先做RGB区间粗过滤，比如目标色R值为255，先查where('r', '>=', 230).where('r', '<=', 255)，同理对G、B做范围过滤，得到候选集后在服务端做色差计算排序
  • 数据量大于10万条：提前对CIELAB三个分量做分桶，每个颜色新增lab_bucket字段存储三个分量桶编号的拼接值，搜索时先查目标色对应桶及相邻8个桶的颜色，再做色差计算排序，可大幅减少计算量

3. 核心色差计算代码示例 #

// 简化版色差计算函数，返回值越小代表颜色越接近，返回值低于2.3时人眼几乎无法感知差异
function calculateColorDiff(targetLab, storedLab) {
  const lDiff = targetLab.l - storedLab.l;
  const aDiff = targetLab.a - storedLab.a;
  const bDiff = targetLab.b - storedLab.b;
  return Math.sqrt(lDiff * lDiff + aDiff * aDiff + bDiff * bDiff);
}

优化建议 #

• 对高频搜索的颜色结果做缓存，不用每次重新计算排序，提升接口响应速度
• 下拉选择器直接用140种标准命名颜色作为选项，用户选择时直接映射到对应标准色值，减少异常输入处理成本
• 若需要支持用户上传图片取色搜索，提取图片主色后直接走上述色值搜索逻辑即可

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