SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

解説

 以前、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などでお気軽に編集部までお寄せください。よろしくお願いいたします。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
マンガで分かるプログラミング用語辞典連載記事一覧

もっと読む

この記事の著者

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

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8739 2015/07/28 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング