Question

如何计算某个RGB值是否与颜色相同

例如，如果我们有集合

var color = {
   r : 20,
   g : 20,
   b : 80
}

然后，当点亮或变黑时，相同的颜色应产生大约相同的比例，如

var colorBrighter = {
   r : 40,
   g : 40,
   g : 100
}

问题是否有人能想到一个函数或公式来检查颜色是否在同一范围内...一种方法来阻止颜色是否是给定颜色的更亮或更暗的变化...

谢谢！

Answer 1

RGB中的直接计算与眼睛感知的距离非常远。甚至没有尝试计算这个空间的距离，它们毫无意义。

寻找与人类感知相匹配的简单计算（例如找到更暗，或接近颜色，或寻找一对对比色）时，通常的解决方法是将颜色转换为另一种颜色空间。

HSL为此提供了非常好的结果。

摘自Wikipedia：

HSL模型根据色调，饱和度和色彩描述颜色   亮度（也称为亮度）。（注：饱和度的定义   HSL与HSV明显不同，亮度不同   强度。）该模型有两个突出的特性：


从黑色到色调到白色的过渡是对称的   仅通过增加亮度来控制

降低饱和度   因此，转变为依赖于亮度的灰色阴影   保持整体强度相对恒定的属性   上面提到的导致HSL的广泛使用，特别是在   CSS3颜色模型。3


与HSV一样，hue直接对应于Color中的hue概念   基础部分。使用色调的优点是

色环周围的色调之间的角度关系是   容易识别可以轻松生成阴影，色调和色调   不影响色调

您会发现许多代码段和库正在进行转换（一个example）。

此外，如果您的目标是在DOM元素上设置颜色，则应考虑直接使用hsl，因为它支持所有浏览器：

color: hsl(120, 100%, 25%);

Answer 2

检查颜色是否在相同范围内的公式

  const difference = (one, two) => Math.sqrt(
    (one.r - two.r) ** 2 +
    (one.g - two.g) ** 2 +
    (one.b - two.b) ** 2
 );

可用作：

console.log(difference(color, colorBrighter));

这基本上计算了三维＆＃34;颜色房间的距离＆＃34;，这是（afaik）确定两种颜色之间差异的常用方法。

一种确定颜色是否是给定颜色的更亮或更暗变化的方法

如果您将颜色想象为矢量，则一个矢量必须是另一个矢量的倍数：

 color1 * k = color2

所以我们只需检查一下这个等式：

const differOnlyInBrightness = (one, two) => (
   k => one.g * k === two.g && one.b * k === two.b
 )(two.r / one.r);

计算某种颜色是否属于给定颜色的同一系列

2 个答案: