摘要：本文就講如何生成一套看起來還不錯的自用標準色板。理論上我們能按照那種規則生成比真彩色少的任意種數的色板。接下去我們生成一個灰色條的色板，專治灰黑白。

原文地址：http://xcoder.in/2014/10/16/generate-color-space/

　　在主題色提取的過程中，要把顏色加入搜索引擎。但是如果是真彩色任意值加進去的話，對于搜索的時候來說無疑是一個復雜的操作。搜索條件要各種計算距離什么的。

　　于是一個妥協的做法就是提供一套調色板，保證所有顏色都被吸納到調色板中的某一色值當中。

　　那么這個時候調色板的覆蓋率以及距離什么的就比較重要了。本文就講如何生成一套看起來還不錯的自用“標準色板”。

　　一開始我用了一套 256 色的色板，不知道哪里搞來的 Windows 色板。

　　由于顏色太多，不好貼代碼，我就直接把鏈接貼過來了：

  
點我萌萌噠 ?(?д?)?!!

　　這一套色板大致的效果如下：

  
這里不支持嵌入 JS 代碼之類的東西，我就附上原文的效果了

　　我指的更好并不一定真的比之前找到的 256 色要好，畢竟上面那個是人家智慧和勞動的結晶。我指的更好是顏色更多，但是偏差又不會太大。

　　理論上我們能按照那種規則生成比真彩色少的任意種數的色板。

　　這里有必要重新普及下 N 多種色彩模式中的其中兩種，也就是我們今天生成一個色板所用到的兩種模式。

　　這個大家都已經耳熟能詳了，無非是 RGB 通道中的分量結合起來生成的一種顏色。

  
RGB 色彩模式是工業界的一種顏色標準，是通過對紅 (R)、綠 (G)、藍 (B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB 即是代表紅、綠、藍三個通道的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一。
  
  
使用 RGB 模型為圖像中每一個像素的 RGB 分量分配一個 0 ~ 255 范圍內的強度值。RGB 圖像只使用三種顏色，就可以使它們按照不同的比例混合，在屏幕上呈現 16777216 (256 * 256 * 256) 種顏色。

  
HSL 色彩模式是工業界的一種顏色標準，是通過對色相 (H)、飽和度 (S)、明度 (L) 三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，HSL 即是代表色相，飽和度，明度三個通道的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一。

　　HSL 色彩模式就是今天的主角了。我們將會用 HSL 生成一張類似下圖的色板，而色板的粒度將會與你決定色板的顏色數量相關：

　　為了簡化代碼，我們暫時不考慮飽和度，也就是說所有顏色讓它飽和度都為 100%。

　　而且實際上色相是在一個圓里面的 0° ~ 360°，那么也就是說我們只需要做兩步就是了：

色相 0° ~ 360° 循環；

以及明度 0% ~ 100% 循環。

　　在這里我定了一個步長：色相以 10° 為一個步長，明度以 5% 為一個步長。并且剔除 RGB 相等的黑白灰色。

  
當然這里步長完全可以按照自己的喜好來。

　　我們以前端的 Javascript 為例，能想到下面的一段代碼：

var count = 0;
$(function() {
    for(var i = 19; i >= 0; i--) {
        for(var j = 0; j < 36; j++) {
            $("#palette").append("
");
            $(".color").eq(count++).css("background-color", "hsl(" + (j * 10) + ", " + "100%, " + parseInt(((i + 1) / 21) * 100) + "%)");
        }
        $("#palette").append("
");
    }
});

　　這里需要注意的是，實際上我明度的步長是 (100 / 22)。然后 0 和 100 這兩個明度我們另外拎出來，所以只取了 1 ~ 21 的明度。

　　剩下的就是跟剛才說的一樣，各色相的各明度生成一個 HSL 顏色賦值給 background-color。

　　接下去我們生成一個灰色條的色板，專治灰黑白。這個時候實際上我們可以直接用 RGB 搞定：

$("#palette").append("
");
for(var i = 0; i < 36; i++) {
    $("#palette").append("
");
    var val = parseInt(((19 - i) / 19) * 255);
    $(".color").eq(count++).css("background-color", "rgb(" + val + ", " + val + ", " + val + ")");
}

　　最后把顏色輸出到一個數組就好了。

  
這里有一點 happy 的是，就算你是用 HSL 來搞的背景色，用 jQuery 的 $(foo).css("background-color") 獲取到的仍然是 RGB 值。

var colors = [];
$(".color").each(function() {
    var result = /rgb((d+), (d+), (d+))/.exec($(this).css("background-color"));
    colors.push({ r: parseInt(result[1]), g: parseInt(result[2]), b: parseInt(result[3]) });
});

$("textarea").val(JSON.stringify(colors));

　　所以最后我們還需要初始的 HTML 了：

　　效果的話這里能看到：

http://blog.xcoder.in/hsl-color-space/

http://runjs.cn/code/spahru8w

　　用 HSL 生成的色彩空間（色板）一個是表現力好，相對于 RGB 來說，好像更好知道如何去生成分部比較 OK 的一個色彩空間。

　　但是也有一個缺點，當我們不去管飽和度的時候，實際上我們還是丟失了一部分的顏色。好在本身我們生成色板也只是為了合并顏色，可以通過 k-D 樹來快速尋找某個顏色在色板中是屬于哪種色塊的。當然，目前我們就是這么做的。

Color Wheel Palette

Refer Image

Algorithm