选择JavaScript中最丰富多彩的颜色

Question

我有一组颜色，想要找到它们的相对色彩饱和度。请问有人可以用javascript给我提供一个示例吗？非常感谢！

- MachineElf

---

你知道基于颜色的R、G、B值的鲜艳度方程吗？ - Šime Vidas

我会认为色彩丰富度的方程式大概是 x = min(R, G, B); colorfulness = (R - x + G - x + B - x) / 2.0。但色彩丰富度有什么用呢？我可以理解饱和度或色度。 - TamusJRoyce

@Šime，你是不是所有问题都用问题来回答？@Tamus，谢谢，我会尝试一下。如果您想避免调色板中的灰色颜色，则色彩丰富性非常有用。 - MachineElf

@Bodyscanner 这被称为评论。它用于了解更多关于问题的信息，并与提问者进行交流，而无需回答问题。一旦你弄清楚了如何使用，你会喜欢上它的 :) - Šime Vidas

@Bodyscanner 那么你的问题是“如何计算色彩丰富度？”。这是一个与编程语言无关的离题问题，不适合在此论坛讨论。 - Šime Vidas

Answer 1

// 您可以通过饱和度和亮度来比较颜色 -

function rgbtoHsv(rgb){
    var c= rgb.match(/\d+/g),
    r= c[0]/255, g= c[1]/255, b= c[2]/255,
    max= Math.max(r, g, b), min= Math.min(r, g, b),
    h= 0, s= 0, v= max;
    if(max!= min){
        var d= max-min;
        s= d/max;
        switch(max){
            case r: h= (g-b)/d +(g< b? 6: 0);
            break;
            case g: h= (b-r)/d + 2;
            break;
            case b: h= (r-g)/d + 4;
            break;
        }
    }
    return [Math.round(h*60), Math.round(s*100), Math.round(v*100)];
}
function sortColors(a, b){
    var a1= rgbtoHsv(a), b1= rgbtoHsv(b);
    return  (b1[1]+b1[2])-  (a1[1]+a1[2]);
}

var colors=['rgb(255,0,0)','rgb(150,150,150)','rgb(0,200,100)','rgb(0,255,255)']; // colors.sort(sortColors).join('\n')

以上代码定义了一个包含四个颜色值的数组，使用sort()方法按照规则排序后以换行符连接成字符串返回。

/*  returned value: (most to least 'colorful')
rgb(255,0,0)
rgb(0,255,255)
rgb(0,200,100)
rgb(150,150,150)
*/

- kennebec

---

太棒了！亮度和饱和度的结合正是我想要的。非常感谢。 - MachineElf

Answer 2

此函数根据RGB值返回饱和度（从0.0到1.0）：

 function saturation(r,g,b) {
     var minVal = Math.min(r, g, b);
     var maxVal = Math.max(r, g, b);
     var delta = maxVal - minVal;
     if (maxVal === 0 ) {
          return 0;
     } else {
          return (delta / maxVal);
     }
 }

我知道你要求色彩丰富，但这可能是一个不错的起点。 （实际上我不知道区别，感谢指出那个维基百科页面）

- Omiod

---

另外，您不需要那个if语句。如果delta为零，则delta/maxVal将为零。 - Šime Vidas

这个应该没问题：var max = ...; var min = ...; return (max - min) / max; - Šime Vidas

没错，但有趣的是，在 http://jsfiddle.net/ 上，jslint 没有指出任何问题（关于声明）。 - Omiod

好的，现在这个检查是为了防止除以零（据说这很糟糕）。 - Omiod

@UVL 当您忘记声明变量时，该变量将成为隐式全局变量。这不是一个错误。但是，应该避免这种情况的发生。 - Šime Vidas