CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/07/28 14:00

解説

 以前、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>
出力結果
出力結果
フィードバックお待ちしております!

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



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:マンガで分かるプログラミング用語辞典

もっと読む

著者プロフィール

  • 柳井 政和(ヤナイ マサカズ)

    クロノス・クラウン合同会社 代表社員 http://crocro.com/ オンラインソフトを多数公開。 プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。 「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5