前言

最近有一个需求是根据图片平均色来改变滑动后导航的颜色，但是由于图片平均色和导航图标/文字颜色接近那么这样的展示效果并不好，因此要求当接近时改变导航的图标/文字颜色。这里直接判断相等肯定是不行的，因此需要一个近似色值的判断方法。于是就有了这篇文章。

参考文献

颜色值近似判断

ps

• 如果大家看到有精简好用的三维作图软件(mac版，CAD,matlab这些就算了太大了)，评论区留言给我，我补几张立体图
• 最终算法传送门

具体思路

首先大家熟悉的色值表示方式RGB也可以去近似，但是误差相当大。所以我们采用HSV的色值表示方式来计算。下面简单说明下HSV色值的原理。
　　和RGB一样，也分为三个值，H:色相，S:饱和度，V:明度。其中S和V都是[0,1]的数，而H为角度，不同平台的H表示是不一样的，参考文献中java环境下该值为[0,360]，而在OC里该值为[0,1]所以在后续的计算中应保持对应。另外需要知道HSV是一个圆锥模型，后面的计算都是利用到这个模型的一些性质，特此说明。
　　HSV与圆锥模型的对应关系如下图

我是百度来的HSV圆锥模型

static double L = 1;
static double angle = 30;
//通过三角函数得出圆锥高
#define HSB_h (L * cos(angle / 180 * M_PI))
//通过三角函数得出圆锥底面半径
#define HSB_r (L * sin(angle / 180 * M_PI))

现在我们有了一个HSV的圆锥模型了，我们把两个色值转换为模型中的向量，代码如下：

CGFloat hue1, saturation1, brightness1, alpha1, hue2, saturation2, brightness2, alpha2;

//这是oc取HSV的方法，brightness对应的就是V值
BOOL success1 = [firstColor getHue:&hue1 saturation:&saturation1 brightness:&brightness1 alpha:&alpha1];
BOOL success2 = [secondColor getHue:&hue2 saturation:&saturation2 brightness:&brightness2 alpha:&alpha2];

//hue在OC中为[0,1]，应转换为[0,2𝛑]进行计算
CGFloat HUE1 = hue1*2*M_PI;
CGFloat HUE2 = hue2*2*M_PI;

//x轴为0°， HSB_r*cos(HUE)为H在x轴上的投影长度，*saturation后变为加了饱和度后x轴的投影长度，*brightness后变为实际色值在圆锥模型中的x轴投影长度。后面均用到相似三角形性质，此处有张图能更清楚。
double x1 = HSB_r * brightness1 * saturation1 * cos(HUE1);
//y轴为90°，HSB_r*sin(HUE)为H在y轴上的投影长度，*saturation后变为加了饱和度后y轴的投影长度，*brightness后变为实际色值在圆锥模型中的y轴投影长度。后面均用到相似三角形性质，此处有张图能更清楚。
double y1 = HSB_r * brightness1 * saturation1 * sin(HUE1);
//z轴不解释
double z1 = HSB_h * (1 - brightness1);
double x2 = HSB_r * brightness2 * saturation2 * cos(HUE2);
double y2 = HSB_r * brightness2 * saturation2 * sin(HUE2);
double z2 = HSB_h * (1 - brightness2);

　　现在我们有了两个向量了，那么做减法吧

double dx = x1 - x2;
double dy = y1 - y2;
double dz = z1 - z2;

ok，众所周知，向量加减会得到新的向量，于是我们现在有了一个新向量，只要计算他的长度即可得出相似度，然后根据结果设定阈值判断即可。
　　回到刚才的圆锥模型

我还是百度来的HSV圆锥模型

//pow()是C函数，次幂运算,0.5即1/2开方运算
float difference = pow (pow(dx, 2) + pow(dy, 2) + pow(dz, 2), 0.5);

下面是做的一些结果校验(由于纯黑纯白不具有验证价值，他的V恒为0，1，所以验证背景色均设置为#FCD100)
　　

简书不支持表格html，为了凸显视觉差表格截图给大家看