はじめに

カラーコードは#ffffffのように、16進数6桁で表現することが多いが、2桁区切りで同じ値が連続する場合は#fffのように3桁で表現することもできる。例えば下記は同じ色を表す。

.myColor {
    color: #112233;
}

.myColor {
    color: #123;
}

6桁よりも3桁の方がすっきして見やすくはなるものの、表現できる色の数は減ってしまう。でもぶっちゃけ3桁で表現できる色の数も相当あるはず…そこで、3桁で表せる色一覧を出力するサンプルを作ってみた。

3桁のカラーコードで表現できる色一覧

color_list.html

<!doctype html>
<meta charset="utf-8">
<title>短縮系の色一覧</title>

<div id="color_list"></div>
<script>
    (function() {
        "use strict";
        var i, j, k, number, html, color;

        html = "<table><th>number<th>color<th>code";
        number = 1;

        for (i = 0; i < 16; i = i + 1) {
            for (j = 0; j < 16; j = j + 1) {
                for (k = 0; k < 16; k = k + 1) {

                    color = i.toString(16) + j.toString(16) + k.toString(16);

                    html += '<tr><td>' + number + '<td style="background-color:#' + color + '"><td>' + color;
                    number = number + 1;
                }
            }
        }
        html += '</table>';

        document.getElementById('color_list').innerHTML = html;

    }());
</script>

全部で4096色！

短縮形のカラーコードで表現できる色一覧

はじめに

3桁のカラーコードで表現できる色一覧