怎样天生一个掩盖广的色板

2019年8月26日 264次阅读 来源: 死月

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

用处

　　在主题色提取的过程当中，要把颜色到场搜刮引擎。然则如果是真彩色恣意值加进去的话，关于搜刮的时刻来讲无疑是一个庞杂的操纵。搜刮前提要种种盘算间隔什么的。

　　因而一个让步的做法就是供应一套调色板，保证一切颜色都被吸纳到调色板中的某一色值当中。

　　那末这个时刻调色板的覆蓋率以及间隔什么的就比较重要了。本文就讲怎样天生一套看起来还不错的自用“规范色板”。

Windows 色板

　　一开始我用了一套 256 色的色板，不晓得那里搞来的 Windows 色板。

　　因为颜色太多，不好贴代码，我就直接把链接贴过来了：

点我萌萌哒 ฅ(๑д๑)ฅ!!

　　这一套色板大抵的结果以下：

这里不支持嵌入 JS 代码之类的东西，我就附上原文的结果了

天生更好的色板

　　我指的更好并不一定真的比之前找到的 256 色要好，毕竟上面谁人是人家伶俐和劳动的结晶。我指的更好是颜色更多，然则误差又不会太大。

　　理论上我们能根据那种划定规矩天生比真彩色少的恣意种数的色板。

相干的颜色形式

　　这里有必要从新提高下 N 多种颜色形式中的个中两种，也就是我们本日天生一个色板所用到的两种形式。

RGB 颜色形式

　　这个人人都已耳熟能详了，无非是 RGB 通道中的重量结合起来天生的一种颜色。

RGB 颜色形式是工业界的一种颜色规范，是经由过程对红 (R)、绿 (G)、蓝 (B)三个颜色通道的变化以及它们相互之间的叠加来获得形形色色的颜色的，RGB 等于代表红、绿、蓝三个通道的颜色，这个规范险些包含了人类目力所能感知的一切颜色，是现在应用最广的颜色体系之一。

运用 RGB 模子为图象中每个像素的 RGB 重量分派一个 0 ~ 255 范围内的强度值。RGB 图象只运用三种颜色，便能够使它们根据差别的比例夹杂，在屏幕上显现 16777216 (256 * 256 * 256) 种颜色。

HSL 颜色形式

HSL 颜色形式是工业界的一种颜色规范，是经由过程对色相 (H)、饱和度 (S)、明度 (L) 三个颜色通道的变化以及它们相互之间的叠加来获得形形色色的颜色的，HSL 等于代表色相，饱和度，明度三个通道的颜色，这个规范险些包含了人类目力所能感知的一切颜色，是现在应用最广的颜色体系之一。

　　HSL 颜色形式就是本日的主角了。我们将会用 HSL 天生一张相似下图的色板，而色板的粒度将会与你决议色板的颜色数目相干：

《怎样天生一个掩盖广的色板》

代码完成

　　为了简化代码，我们暂时不斟酌饱和度，也就是说一切颜色让它饱和度都为 100%。

　　而且实际上色相是在一个圆内里的 0° ~ 360°，那末也就是说我们只须要做两步就是了：

  1. 色相 0° ~ 360° 轮回；
  2. 以及明度 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("<div class='color'></div>");
            $(".color").eq(count++).css("background-color", "hsl(" + (j * 10) + ", " + "100%, " + parseInt(((i + 1) / 21) * 100) + "%)");
        }
        $("#palette").append("<div style='clear: both;'></div>");
    }
});

　　这里须要注重的是，实际上我明度的步长是 (100 / 22)。然后 0 和 100 这两个明度我们别的拎出来，所以只取了 1 ~ 21 的明度。

　　剩下的就是跟适才说的一样，各色相的各明度天生一个 HSL 颜色赋值给 background-color。

　　接下去我们天生一个灰色条的色板，专治灰是非。这个时刻实际上我们能够直接用 RGB 搞定：

$("#palette").append("<br />");
for(var i = 0; i < 36; i++) {
    $("#palette").append("<div class='color'></div>");
    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 了：

<textarea></textarea>
<div id="palette"></div>
<div style="clear: both;"></div>

　　结果的话这里能看到：

小结

　　用 HSL 天生的颜色空间（色板）一个是表现力好，相干于 RGB 来讲，彷佛更好晓得怎样去天生分部比较 OK 的一个颜色空间。

　　然则也有一个瑕玷，当我们不去管饱和度的时刻，实际上我们照样丧失了一部分的颜色。幸亏自身我们天生色板也只是为了兼并颜色，能够经由过程 k-D 树来疾速寻觅某个颜色在色板中是属于哪一种色块的。固然，现在我们就是这么做的。

参考资料

    原文作者：死月
    原文地址: https://segmentfault.com/a/1190000000725758
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞