代码之家 › 专栏 › 技术社区 › Martin

构造颜色以获得最大对比度

colors graphics math language-agnostic algorithm

Martin · 技术社区 · 15 年前

我想在屏幕上画一些项目,每个项目在n个集合中的一个。布景的数量一直在变化,所以我需要计算出尽可能不同的n种不同颜色(以便于识别布景中的内容)。

例如,如果n=2,我的结果将是黑白的。有了三个,我想我会得到全部的红色,全部的绿色,全部的蓝色。对于这四个问题,正确的答案不太明显,这就是我遇到困难的地方。

编辑:显而易见的方法是将0映射到红色,1映射到绿色,所有介于两者之间的颜色都映射到适当的彩虹颜色,然后通过执行get rainbow colour(n/totalsets)可以获得set n的颜色,因此getrainbowcolour方法就是解决此问题所需的全部方法。

3 回复 | 直到 10 年前

Community CDub 8 年前

您可以在这里阅读hsl和hsv颜色模型 wikipedia article . 缩写中的“H”代表色调,这就是你想要的彩虹。听起来你想让饱和度达到最大。本文还解释了如何转换为RGB颜色。

Pete Kirkham 15 年前

这个问题的答案是主观的——什么是与完全视力的人最好的对比,不一定是与色盲或视力有限的人或在黑暗环境中操作设备的正常视力的人最好的对比。

生理上,人类对于强度的分辨力比色调或饱和度的分辨力强得多。这就是为什么模拟电视、数字视频和照片压缩会丢弃颜色信息以减少带宽的原因。( 4:2:2 )-如果你把两个不同强度的像素放在一起,不管它们是什么颜色——我们只能感觉到相同强度的大面积上的颜色差异。

所以,如果你要展示的东西有很多只有几个像素的小区域,或者你想在黑暗中使用它(在黑暗中,大脑会增强蓝色细胞,我们也看不到颜色),或者由10%的色盲男性群体使用,那么考虑使用强度作为主要手段。区分因子而不是色调。 GetRainbowColour 会忽略人类视觉感知的最重要的维度,但对于连续的数据来说可以很好地工作。

Chip Camden 10 年前

谢谢,Brainjam,建议使用HSL。我提出了这个小函数,它似乎对堆积图很有用:

var contrastingColors = function(len) {
    var result = [];
    if (len > 0) {
        var h = [0, 180];                       // red, cyan
        var shft = 360 / len;
        var flip = 0;
        var l = 50;
        for (var ix = 0; ix < len; ix++) {
            result.push("hsl(" + h[flip] + ",100%," + l + "%)");
            h[flip] = (h[flip] + shft) % 360;
            flip = flip ? 0 : 1;
            if (flip == 0) {
                l = (l == 50) ? 30 : (l == 30? 70 : 50);
            }
        }
    }
    return result;
};