広い色板を作成する方法

原文住所:http://xcoder.in/2014/10/16/generate-color-space/
用途
テーマ色抽出中に検索エンジンに色を追加します.しかし、本物のカラーの任意の値を加えると、検索時には複雑な操作になるに違いない.検索条件はいろいろな計算距離とか.
そこで妥協する方法は、すべての色がパレットのある色値に吸収されることを保証するパレットを提供することです.
では、このときのパレットのカバー率や距離などが重要です.本稿では、見た目がいい「標準色板」をどのように生成するかについて説明します.
Windowsパレット
最初は256色の色板を使っていましたが、どこで手に入れたのか分かりません.
色が多すぎてコードが貼りにくいので、リンクを直接貼りました.
点我萌ฅд๑)ฅ!!
この色板セットの効果は以下の通りです.
ここではJSコードなどの埋め込みはサポートされていませんが、原文の効果を添付します.
より良いパレットを作成
私が指しているのはもっと良くて、本当に前に見つけた256色より良いとは限らない.結局、上は人の知恵と労働の結晶だ.色がもっといいということですが、偏差はあまり大きくありません.
理論的には,その規則に従って真色よりも少ない任意の数の色板を生成することができる.
関連するカラーモード
ここでは,Nの多様な色パターンのうちの2つ,すなわち,今日1つの色板を生成するために用いられる2つのパターンを再普及する必要がある.
RGBカラーモード
これは誰もがよく知っているが、RGBチャネルの成分が結合して生成される色にほかならない.
RGB色パターンは工業界の色基準であり、赤(R)、緑(G)、青(B)の3つの色チャネルの変化とそれらの相互間の重ね合わせによって様々な色が得られる.RGBは赤、緑、青の3つのチャネルを表す色であり、この基準には人間の視力が感知できるすべての色がほとんど含まれる.現在最も広く使われている色システムの一つです.
RGBモデルを用いて、画像中の各画素のRGB成分に0〜255の範囲の強度値を割り当てる.RGB画像は、3色のみを使用することで、異なる割合で混合することができ、画面に16777216(256 * 256 * 256)色を表示することができる.
HSL色モード
HSLの色パターンは工業界の色基準であり、色相(H)、飽和度(S)、明度(L)の3つの色チャネルの変化とそれらの相互間の重ね合わせによって様々な色が得られる.HSLは色相、飽和度、明度の3つのチャネルを表す色であり、この基準は人間の視力が感知できるすべての色をほとんど含んでいる.現在最も広く使われている色システムの一つです.
HSLカラーモードが今日の主役です.HSLで下図のような色板を生成します.色板の粒度は、色板の色数を決定することに関連します.
コード実装
コードを簡略化するために、飽和度はしばらく考慮されません.つまり、すべての色が飽和度を100%にします.
しかも実は色相は1つの円の中の0°~360°で、つまり私たちは2つのステップをするだけです.

色相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が必要です

<div id="palette"/>
<div style="clear: both;"/>
</code></pre> 
 <p>　　         ：</p> 
 <ul> 
  <li>http://blog.xcoder.in/hsl-color-space/</li> 
  <li>http://runjs.cn/code/spahru8w</li> 
 </ul> 
 <h2>  </h2> 
 <p>　　  HSL        （  ）       ，    RGB   ，                OK        。</p> 
 <p>　　        ，            ，                。                   ，     k-D                       。  ，          。</p> 
 <h2>    </h2> 
 <ul> 
  <li>Color Wheel Palette</li> 
  <li>Refer Image</li> 
  <li>Algorithm</li> 
 </ul> 
</div>
                            </div>
                        </div>