根据某些集合创建随机颜色的方法答案

【问题标题】：method to create random colors according to some sets根据某些集合创建随机颜色的方法
【发布时间】：2016-02-01 15:06:02
【问题描述】：

在我的 javascript 文件中，我有一组由字母和数字组成的情侣，例如：{(A,5), (B,7), ..., (Z,3)}。

对于每一对 (A,x)，我的 html 中有 x div 和 style = "background-color: {{object.color}}"。

我想写一个方法来随机计算每对 (A,x) 的 x 颜色，这样：

每种颜色都足以区分所有颜色。
同一对情侣的每种颜色都足够接近来识别这对情侣。

例如：我有这对夫妇：{(A,5), (B,4), (C,10)} 所以我的 html 中有 19 个 div。对于集合 A 的所有 5 个 div，我计算出蓝色，对于集合 B 的所有 4 个 div，我计算出绿色，对于集合 C 的所有 10 个 div，我计算出红色。

当然，你不知道这对夫妇是提前认识的:)

有没有办法做到这一点，也许使用 css 上每种颜色的 RGB 值或类似的东西？

目前我只做了一个方法，我完全随机选择每种颜色，只避免颜色太深或太白，并且有一个循环来保证已经拍摄的颜色不能被拍摄两次：

   function(){
        var cb=0;
        var cr=0;
        var cg=0;
        var minEcart=40;
        var testB=true;
        var cptI=0;
        while(testB){
            testB=false;
            cr=Math.round(Math.random()*170) + 85;
            cb=Math.round(Math.random()*170) + 85;
            cg=Math.round(Math.random()*170) + 85;
            for(var j=0; j<$scope.colorAlreadyGiven.length;j++){
                if(($scope.colorAlreadyGiven[j][0]-cb>=-minEcart)&&
                    ($scope.colorAlreadyGiven[j][0]-cb<=minEcart)&&
                    ($scope.colorAlreadyGiven[j][1]-cg>=-minEcart)&&
                    ($scope.colorAlreadyGiven[j][1]-cg<=minEcart)&&
                    ($scope.colorAlreadyGiven[j][2]-cr>=-minEcart)&&
                    ($scope.colorAlreadyGiven[j][2]-cr<=minEcart)){
                        testB=true;
                        cptI++;
                        if(cptI>=50){
                            testB=false;
                        }
                }
            }
        }
        $scope.colorAlreadyGiven.push([cb,cg,cr]);
        return "#"+(cb+cg*256+cr*65536).toString(16);
  }

感谢您的关注。

【问题讨论】：

目前我有一种方法可以选择随机颜色，避免颜色太深或太白，并使用循环确保不能再次选择已经选择的任何颜色，但我没有发现任何东西可以将颜色保持在特定范围内，从而可以知道我来自哪个集合。
@LyxtheLyxos - 提示：不要在 RGBA 色彩空间中工作。在 HSLA 工作。这样，只有一个组件负责色相或颜色，另一个负责颜色的饱和度或数量，三分之一负责亮度或亮度/暗度，最后一个负责 Alpha 值，这可能是 100%（完全不透明）适用于您的用例。这是一个 HSLA 颜色选择器示例：standardista.com/webkit/ch7/hsla.html 请注意它比 RGBA 更人性化多少？ ;)

标签： javascript css angularjs random background-color

【解决方案1】：

查看这篇关于使用 javascript https://css-tricks.com/snippets/javascript/lighten-darken-color/ 使颜色变亮和变暗的文章

你可以选择一个底色，然后随意变亮或变暗

另一种方法是首先使用 CSS 预处理器（SASS 或 LESS）生成调色板，然后使用 javascript 通过类名或属性（.red1 .red2 .red3 或[data-red-shade=1] [data-red-shade=2] [data-red-shade=3])

【讨论】：

我不确定我是否可以使用一个或另一个命题，因为在第一个命题中，我不确定较浅的色调是否足以让人一眼就看出它们不一样，并且为了预先计算我不知道的颜色，我需要预先计算出我需要的数字，所以预先计算每一件事可能太困难了。此外，如果要计算的颜色很少，我可能会使用大范围的差异，反之，如果要计算的颜色很多，我会接受非常接近的颜色。所以我更喜欢一种将所有这些都考虑在内的方法

【解决方案2】：

您最好使用实验室色彩空间，因为计算会更容易。在此处查找颜色转换函数：Colour conversion in javascript。

最基本的 Lab 逻辑如下所示：

将对数计入x；
将 A 和 B 颜色空间分成 x 个部分（您可以将其视为 2D 图）；
为每对使用每个部分的中点；
对于每一对，找出 L 刻度上等距的点数。

现在每对都有一组坐标{((a1,b1),[L1, L2, L3...]),((a1,b1),[L1, L2, L3...]), ((a1,b1),[L1, L2, L3...]), ...}

随着你的继续，你会找到更好的方法来安排这些。

【讨论】：