如何生成顏色以按顏色對項目進行分組？

我有一個項目組，如：如何生成顏色以按顏色對項目進行分組？

<div data-group="1">Item</div> 
<div data-group="1">Item</div> 
<div data-group="1">Item</div> 

<div data-group="2">Item</div> 
<div data-group="2">Item</div>

我想改變由一羣背景顏色，所以我可以告訴他們分開。但背景不能使文本無法讀取。我不期望有超過20個組。

有沒有辦法生成總是與#000文本一起工作的背景顏色？

或者通過#000或#fff文字知道它是否會更好地工作，以便我可以在需要時翻轉文本顏色？

或者我應該放棄讓它變成動態的想法，只是預先分配20種顏色（如Trello對標籤）？

來源

2017-04-09 BrunoLM

本質** **任何顏色超過一定的亮度將「工作」，如果文本是純粹的黑色。 –

最簡單的解決方案將使用一個列表，但如果您想製作一個計算隨機顏色的函數，您也可以這樣做。 – epascarello

因爲在線獲取托盤或使用瀏覽器擴展或其他顏色工具非常容易，所以我個人會從那裏抓取一堆，並使用增量類放入數組或樣式表中 – charlietfl

我會推薦使用預先確定的顏色列表，因爲您不僅希望文本在背景上清晰可讀，而且您還希望這些組可以相互區分。如果您有可用性方面的問題，您可能會想避開看起來與色盲用戶太相似的顏色。欲瞭解更多信息，請參閱：http://www.somersault1824.com/tips-for-designing-scientific-figures-for-color-blind-readers/。該文章包含15個色盲安全色的列表，這些色可以相互區分。

然後，您可以使用類似下面的jQuery代碼（如果jQuery的可用）指派方式：

var colorList = [colors...] 
 
$('div').css('background-color', function(){ 
    return colorList[this.getAttribute('data-group')] 
})

來源

2017-04-10 00:20:25

如何生成顏色以按顏色對項目進行分組？

回答

相關問題