根據一些集合創建隨機顏色的方法

在我的JavaScript文件中，我有一套由一封信和一個數字組成的夫婦eache，例如：{(A,5), (B,7), ..., (Z,3)}。根據一些集合創建隨機顏色的方法

對於每一對夫妻(A,x)我有我的HTML與style = "background-color: {{object.color}}" x divs。

我想寫隨機計算x的顏色對於每個對（A，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); 
    }

感謝您的關注。

來源

2016-02-01 Lyxthe Lyxos

目前我有一種方法可以選擇隨機的顏色，避免那些太黑或太白的顏色，並且有一個循環以確保任何已經選取的顏色都不能被第二次選取，但是我發現沒有任何東西可以將顏色保留在特定的範圍內，以便知道我是從哪個集合中選取的 –

@LyxtheLyxos - 提示：不要在RGBA色彩空間中工作。在HSLA工作。這樣，只有一個組件對色調或顏色負責，對飽和度或顏色數量是另一個組件，對於亮度或亮度/黑度爲第三，對於Alpha值爲最後一個，這可能是100％（完全不透明）用於你的用例。這裏有一個HSLA顏色選擇器的例子：http://standardista.com/webkit/ch7/hsla.html注意比RGBA更加人性化嗎？ ;） – enhzflep

退房這篇文章減輕和變暗的顏色與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]）

來源

2016-02-01 15:13:44 jmcgriz

我不確定我可以使用其中一個或另一個命題，因爲在第一個命令中，我不確定較輕的色調是否足夠不同以告訴它們只是一個外觀不一樣，並且爲了預先計算顏色我不知道預先計算出我需要的數量，所以預先計算每件事情可能太困難了。另外，如果計算的顏色很少，我可能會使用大範圍的差異，反之，如果有很多顏色要計算，我會接受相當接近的顏色。所以我會預先考慮一個考慮到所有這些因素的方法 –

您最好使用實驗室顏色自那以來的空間e的計算會更容易。在此處查找顏色轉換功能：Colour conversion in javascript。

最基本的實驗室邏輯將是這個樣子：

數對數爲X;
將A和B色彩空間拆分爲x個部分（可以將其視爲2D圖形）;
爲每一對使用每個部分的中點;
對於每一對，找到在L尺度上等距的點數。

現在你已經爲每對一組座標{((a1,b1),[L1, L2, L3...]),((a1,b1),[L1, L2, L3...]), ((a1,b1),[L1, L2, L3...]), ...}

當你去，你會發現更好的方法來安排這些。

來源

2016-02-01 17:46:11 Nomenator

根據一些集合創建隨機顏色的方法

回答

相關問題