「HSV、CMYK」
～マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典（83）

解説

　以前、RGBを紹介しましたが、色の表現方法は他にもいろいろあります。その中で、パソコンを使っていてよく出てくるのは、HSVとCMYKです。

　HSVは、色相（Hue）、彩度（Saturation）、明度（Value）の略です。この色の表現方法は、人間にとって直感的で、画像の色を変える場合に、よく利用されます。

　RGBとHSVは、計算式に従って機械的に変換可能なため、プログラム内でも、よく相互変換されます。

　CMYKは、シアン（Cyan 水色）、マゼンタ（Magenta 赤紫色）、イエロー（Yellow 黄色）、キー・プレート（Key Plate 黒色）の略です。こちらは印刷でよく用いられます。

　RGBのように、発光体の色の合成ではなく、インクなどの反射光による色の合成なので、若干くすんで色あせたような感じになります。そしてRGBとHSVのように、機械的に相互変換することはできません。変換すると色が変わります。

　他にも色を表現する方法は多数ありますが、パソコンでよく使うこの2つを覚えておくとよいと思います。

サンプル

　HSVを使用したコードを、JavaScriptで簡単に書いてみます。

<html>
    <head>
        <title>「HSV」のサンプル</title>
        <!-- https://github.com/bgrins/TinyColor -->
        <script src="https://rawgit.com/bgrins/TinyColor/master/tinycolor.js">
        </script>
    </head>
    <body>
        <pre><script type="text/javascript">
            // 元の色
            document.writeln("元の色");
            var r = 200, g = 100, b = 50;
            out(r, g, b);
            document.writeln("");

            // 色相を +30 ずつ
            document.writeln("色相を +30 ずつ");
            for (var i = 0; i <= 360; i += 30) {
                var hsv = tinycolor({r: r, g: g, b: b}).toHsv();
                hsv.h = (hsv.h + i) % 360;
                var rgb = tinycolor(hsv).toRgb();
                out(rgb.r, rgb.g, rgb.b);
            }
            document.writeln("");

            // 彩度を 1/n ずつ
            document.writeln("彩度を 1/n ずつ");
            for (var i = 1; i < 6; i ++) {
                var hsv = tinycolor({r: r, g: g, b: b}).toHsv();
                hsv.s /= i;
                var rgb = tinycolor(hsv).toRgb();
                out(rgb.r, rgb.g, rgb.b);
            }
            document.writeln("");

            // 明度を 1-0.2*n 倍ずつ
            document.writeln("明度を 1-0.2*n 倍ずつ");
            for (var i = 1; i < 6; i ++) {
                var hsv = tinycolor({r: r, g: g, b: b}).toHsv();
                hsv.v *= 1 - 0.2 * i;
                var rgb = tinycolor(hsv).toRgb();
                out(rgb.r, rgb.g, rgb.b);
            }

            // 出力関数
            function out(r, g, b) {
                var col = "rgb(" + r + "," + g  + "," + b + ")";
                var style = "color: " + col;
                document.writeln(
                    '<span style="' + style + '">■' + col+ '</span>'
                );
            }
        </script></pre>
    </body>
</html>

出力結果

フィードバックお待ちしております！

　ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookやTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。