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

Question

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

例如,如果我们有这个集合

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

那么点亮或涂黑时相同的颜色应该会产生大约相同的比例

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

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

谢谢!

Answer 1

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

寻找与人类感知相匹配的简单计算(例如,找到更暗,或接近颜色,或寻找一对对比色)时,通常的解决方案是将颜色转换为另一个颜色空间.

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

来自维基百科的摘录:

HSL模型根据色调,饱和度和亮度(也称为亮度)描述颜色.(注意:HSL中饱和度的定义与HSV明显不同,亮度不是强度.)该模型有两个突出的属性:

• 从黑色到色调到白色的过渡是对称的,并且仅通过增加亮度来控制
• 减少饱和度转变为依赖于亮度的灰度,从而保持总体强度相对恒定.上述特性导致HSL的广泛使用,特别是在CSS3颜色模型中.3

与在HSV中一样,hue直接对应于Color Basics部分中的hue概念.使用色调的优点是

容易识别色环周围的色调之间的角度关系可以容易地生成色调,色调和色调而不影响色调

您将找到许多片段和库进行转换(一个示例).

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

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