2

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

例如，如果我们有集合

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

那么相同的颜色在点亮或变黑时应该产生大约相同的比例，可能类似于

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

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

谢谢！

4

2 回答 2

4

RGB 中的直接计算与眼睛所感知的相差甚远。甚至不要试图计算这个空间中的距离，它们没有任何意义。

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

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

摘自维基百科：

HSL 模型根据色调、饱和度和亮度（也称为亮度）来描述颜色。（注意：HSL 中饱和度的定义与 HSV 有很大不同，亮度不是强度。）该模型有两个突出的属性：

  • 从黑色到色调到白色的过渡是对称的，仅通过增加亮度来控制
  • 根据亮度降低饱和度过渡到灰色阴影，从而保持整体强度相对恒定 上述属性导致 HSL 的广泛使用，特别是在 CSS3 颜色模型中。3

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

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

您会发现许多片段和库都在进行转换（一个示例）。

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

color: hsl(120, 100%, 25%);
于 2018-05-21T11:48:31.473 回答
1

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

  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));

这基本上计算了3维“色彩室”中的距离，这是（afaik）确定两种颜色之间差异的常用方法。

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

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

 color1 * k = color2

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

const differOnlyInBrightness = (one, two) => (
   k => one.g * k === two.g && one.b * k === two.b
 )(two.r / one.r);
于 2018-05-21T11:48:20.750 回答