摘要：本文就講如何生成一套看起來(lái)還不錯(cuò)的自用標(biāo)準(zhǔn)色板。理論上我們能按照那種規(guī)則生成比真彩色少的任意種數(shù)的色板。接下去我們生成一個(gè)灰色條的色板，專(zhuān)治灰黑白。

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

　　在主題色提取的過(guò)程中，要把顏色加入搜索引擎。但是如果是真彩色任意值加進(jìn)去的話(huà)，對(duì)于搜索的時(shí)候來(lái)說(shuō)無(wú)疑是一個(gè)復(fù)雜的操作。搜索條件要各種計(jì)算距離什么的。

　　于是一個(gè)妥協(xié)的做法就是提供一套調(diào)色板，保證所有顏色都被吸納到調(diào)色板中的某一色值當(dāng)中。

　　那么這個(gè)時(shí)候調(diào)色板的覆蓋率以及距離什么的就比較重要了。本文就講如何生成一套看起來(lái)還不錯(cuò)的自用“標(biāo)準(zhǔn)色板”。

　　一開(kāi)始我用了一套 256 色的色板，不知道哪里搞來(lái)的 Windows 色板。

　　由于顏色太多，不好貼代碼，我就直接把鏈接貼過(guò)來(lái)了：

  
點(diǎn)我萌萌噠 ?(?д?)?!!

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

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

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

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

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

　　這個(gè)大家都已經(jīng)耳熟能詳了，無(wú)非是 RGB 通道中的分量結(jié)合起來(lái)生成的一種顏色。

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

  
HSL 色彩模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過(guò)對(duì)色相 (H)、飽和度 (S)、明度 (L) 三個(gè)顏色通道的變化以及它們相互之間的疊加來(lái)得到各式各樣的顏色的，HSL 即是代表色相，飽和度，明度三個(gè)通道的顏色，這個(gè)標(biāo)準(zhǔn)幾乎包括了人類(lèi)視力所能感知的所有顏色，是目前運(yùn)用最廣的顏色系統(tǒng)之一。

　　HSL 色彩模式就是今天的主角了。我們將會(huì)用 HSL 生成一張類(lèi)似下圖的色板，而色板的粒度將會(huì)與你決定色板的顏色數(shù)量相關(guān)：

　　為了簡(jiǎn)化代碼，我們暫時(shí)不考慮飽和度，也就是說(shuō)所有顏色讓它飽和度都為 100%。

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

色相 0° ~ 360° 循環(huán)；

以及明度 0% ~ 100% 循環(huán)。

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

  
當(dāng)然這里步長(zhǎng)完全可以按照自己的喜好來(lái)。

　　我們以前端的 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("
");
    }
});

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

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

　　接下去我們生成一個(gè)灰色條的色板，專(zhuān)治灰黑白。這個(gè)時(shí)候?qū)嶋H上我們可以直接用 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 + ")");
}

　　最后把顏色輸出到一個(gè)數(shù)組就好了。

  
這里有一點(diǎn) happy 的是，就算你是用 HSL 來(lái)搞的背景色，用 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 了：

　　效果的話(huà)這里能看到：

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

http://runjs.cn/code/spahru8w

　　用 HSL 生成的色彩空間（色板）一個(gè)是表現(xiàn)力好，相對(duì)于 RGB 來(lái)說(shuō)，好像更好知道如何去生成分部比較 OK 的一個(gè)色彩空間。

　　但是也有一個(gè)缺點(diǎn)，當(dāng)我們不去管飽和度的時(shí)候，實(shí)際上我們還是丟失了一部分的顏色。好在本身我們生成色板也只是為了合并顏色，可以通過(guò) k-D 樹(shù)來(lái)快速尋找某個(gè)顏色在色板中是屬于哪種色塊的。當(dāng)然，目前我們就是這么做的。

Color Wheel Palette

Refer Image

Algorithm