色断面図

色の三属性である「色相」「彩度」「明度」それぞれをベースに他の2つの属性について表を作ってみました。それぞれ特徴があるようで眺めてみると面白いと思います。もちろん実用にも。

実行結果: 色相断面図, 彩度断面図, 明度断面図

colortable.html

<title>色断面図</title>
<!--
Copyright (C) Takashi Utsunomiya. All Rights Reserved.
http://uttsu.com/

2003.01.26  ver 1.03
    - 色相、彩度、明度断面図（それぞれ24、16、17段階）
2003.01.26  ver.1.02
    - 彩度断面図
2003.01.25  ver 1.01
    - 色相断面図（24色相）
2003.01.25  ver 1.00
    - 色相断面図（12色相）
-->

<style>
h3 { margin: 10 0 0 0; letter-spacing: 1; }
td { font-size: 80%; text-align: center; }
</style>

<script>

Number.prototype.toHex = function() {
    return ('0'+this.toString(16)).substr(this.toString(16).length-1);
}

    var hues = [            // 色相
        [4,0,0], [4,1,0], [4,2,0], [4,3,0], [4,4,0], [3,4,0], [2,4,0], [1,4,0],
        [0,4,0], [0,4,1], [0,4,2], [0,4,3], [0,4,4], [0,3,4], [0,2,4], [0,1,4],
        [0,0,4], [1,0,4], [2,0,4], [3,0,4], [4,0,4], [4,0,3], [4,0,2], [4,0,1]
    ];
    var chromas = 16;       // 彩度
    var values = 17;        // 明度

// 色相、彩度、明度を選択
//  do_hue();
//  do_chroma();
    do_value();

// ◆
function w(val) {
    document.write(val+'\n');
}

// ◆
function hcv2rgb(hue, chroma, value) {
    var rgb = [];
    var i, a, v;
    var vharf = (values-1)/2;

    // 色相
    for (i=0; i<3; i++) {
        rgb[i] = (hues[hue][i] ? hues[hue][i]*64 -1 : 0);
    }

    // 彩度
    for (i=0; i<3; i++) {
        v = (hues[hue][i] == 2 ? 0 : (255/2-rgb[i])/(chromas-1));
        rgb[i] += chroma * v;
    }

    // 明度
    for (i=0; i<3; i++) {
        v = (value == vharf ? 0 : (value > vharf ? (255-rgb[i])/vharf : -rgb[i]/vharf));
        rgb[i] += Math.abs(value-vharf) * v;
    }

    return rgb;
}

// ◆
function do_hue() {
    var i, j, k, l;
    var aa = [], rgb = [];
    var hue = [0, 63, 127, 191, 255];

    for (i=0; i<hues.length; i++) {
        w('<h3>'+hue[hues[i][0]]+','+hue[hues[i][1]]+','+hue[hues[i][2]]+'</h3>');
        w('<table>');
        for (j=0; j<values; j++) {
            w('<tr>');
            for (k=0; k<chromas; k++) {
                aa = hcv2rgb(i, k, values-1-j);
                for (l=0; l<3; l++) {
                    aa[l] = Math.floor(aa[l]);
                }
                b = aa[0]+','+aa[1]+','+aa[2];
                w('<td style="color: rgb('+(255-aa[0])+','+(255-aa[1])+','+(255-aa[2])+'); background: rgb('+b+'); ">'
                    +b+'<br>#'+(aa[0].toHex()+aa[1].toHex()+aa[2].toHex()).toUpperCase()+'</td>');
            }
        }
        w('</table>');
    }
}

// ◆
function do_chroma() {
    var i, j, k, l;
    var aa = [], rgb = [];

    for (i=0; i<chromas; i++) {
        w('<h3>彩度 = '+(chromas-i-1)+' / '+(chromas-1)+'</h3>');
        w('<table>');
        for (j=0; j<values; j++) {
            w('<tr>');
            for (k=0; k<hues.length; k++) {
                aa = hcv2rgb(k, i, values-1-j);
                for (l=0; l<3; l++) {
                    aa[l] = Math.floor(aa[l]);
                }
                b = aa[0]+','+aa[1]+','+aa[2];
                w('<td style="color: rgb('+(255-aa[0])+','+(255-aa[1])+','+(255-aa[2])+'); background: rgb('+b+'); ">'
                    +b+'<br>#'+(aa[0].toHex()+aa[1].toHex()+aa[2].toHex()).toUpperCase()+'</td>');
            }
        }
        w('</table>');
    }
}

// ◆
function do_value() {
    var i, j, k, l;
    var aa = [], rgb = [];

    for (i=1; i<values-1; i++) {
        w('<h3>明度 = '+(values-i-1)+' / '+(values-1)+'</h3>');
        w('<table>');
        for (j=0; j<chromas; j++) {
            w('<tr>');
            for (k=0; k<hues.length; k++) {
                aa = hcv2rgb(k, j, values-1-i);
                for (l=0; l<3; l++) {
                    aa[l] = Math.floor(aa[l]);
                }
                b = aa[0]+','+aa[1]+','+aa[2];
                w('<td style="color: rgb('+(255-aa[0])+','+(255-aa[1])+','+(255-aa[2])+'); background: rgb('+b+'); ">'
                    +b+'<br>#'+(aa[0].toHex()+aa[1].toHex()+aa[2].toHex()).toUpperCase()+'</td>');
            }
        }
        w('<tr>');
        for (j=0; j<hues.length; j++) {
            w('<td style="color: white;">255,255,255</td>');
        }
        w('</table>');
    }
}

</script>