RGBやカラーコードの色表示と相互変換ができる簡易ツール

このプログラムは、RGB値やカラーコードから、色の表示や相互変換を行う、VCSSL製の簡易ツールです。

スポンサーリンク

---

使用方法

ダウンロードと展開（解凍）

まず、PC（スマホは未対応）で上の画面の「 ダウンロード 」ボタンを押してください。 するとZIP形式で圧縮されたファイルがダウンロードされます。

その後、ZIPファイルを右クリックして「すべて展開」や「ここに展開」などで展開（解凍）してください。 展開が成功すると、ZIPファイルと同じ名前のフォルダができ、その中にZIPファイルの中身が入っています。

» 展開がエラーで止まってしまう場合や、ファイル名が文字化けしてしまう場合は…

プログラムの起動

Windows をご使用の場合

上記でZIPファイルを展開したフォルダ内にある、以下のバッチファイルをダブルクリック実行してください：

もしプログラムを書き変えながら使いたい場合は、代わりに「 VCSSL_Editor__プログラム編集はこちら.bat 」を実行してください。

正常に起動できると、初回のみ、Java実行環境を入手するか等を尋ねられるので、適時答えて済ませると、プログラムが起動します。 2回目以降はすぐに起動します。

» うまく起動できずにエラーになってしまう場合は…

Linux 等をご使用の場合

ZIPファイルを展開したフォルダ内へコマンドライン端末で cd して、以下の通り入力して実行してください：

» javaコマンドが使用できない等のエラーが表示される場合は…

操作方法

まず、左のRED/GREEN/BLUE項目に、0〜255のRGB値を入力してください。または、右のCODE項目に、000000〜ffffffのカラーコードを入力してください。

RGB値を入力した場合は、続いて中央の「 >> 」ボタンを押して下さい。カラーコードを入力した場合は、「 << 」ボタンを押して下さい

すると、画面下部の色見本ディスプレイにその色が表示され、RGB/カラーコード項目にも、入力値が相互変換されて表示されます。

題材解説

ディスプレイと色

RGB値やカラーコードは、画像処理やWEBデザイン、ソフトウェアのGUIデザインなど、幅広い分野で用いられている、色の表現方法です。

これらについて理解するためには、まずはパソコンなどのディスプレイ（モニター）が、どのようにして色を表現しているかを深く知るのが近道です。

パソコン用でもテレビでも、ディスプレイをかなり拡大して見ると、非常に小さな粒のような「画素（ピクセル）」が集まって構成されている事を確認できますが、これは赤色、緑色、青色の長方形ライトをまとめたようなものになっています。もっとも、最近の高密度なディスプレイでは肉眼で確認するのは至難の技ですが、古いテレビなどでは簡単に確認できます。

ディスプレイでは、この三色の長方形ライトの明るさ調整する事で、その画素の色を表現しています。液晶、プラズマ、ブラウン管といった種類は、このライトを光らせる仕組みが違うだけであって、色を表現する原理は同じです。

光の三原色と加法混色

人間の目は、どのようにして色を認識しているのでしょうか。目の仕組みを少し見てみましょう。 色覚のある生物の目には「 錐体細胞 」と言って、特定の色に反応する細胞があります。人間の持つ錐体細胞には、赤色、緑色、青色に反応する三種類が存在します（最近の研究では、どうも四種類持っている人もいるらしいですが、ここでは割愛します）。

つまり人間は、見た光に含まれている、赤色、緑色、青色の成分の比率によって、色を見分けています。なので、この三色の光を適当な比率で混ぜる事により、人間の目に対しては、ほぼ全ての色を再現できるというわけです。 それぞれの色を混ぜれば何色に見えるかは、下図の通りです。

上図において、光の三原色を混ぜ合わせた結果の色が、絵の具の三原色を混ぜた場合と全く異なる事に、疑問を抱かれるかもしれません。その原因は、絵の具の混色と、光の混色の、メカニズムの違いによるものです。

絵の具の色は、その色以外の光を吸収し、その色だけを反射する事で、発色を行っています。なので二種類の絵の具を混ぜると、お互いの色の光を吸収しあい、共通部分の色成分だけが残ります。これを減法混色と言います。

これに対して、二色の光の混ぜ合わせでは、単純にそれぞれの光の色成分を合わせたものが、合成後の色となります。これを加法混色と呼びます。

加法混色と減法混色では、混ぜ合わせた結果の色が全く異なります。慣れるまでは注意が必要です。

24bitカラーとRGB値

ディスプレイの話に戻りましょう。現在のディスプレイで基本的なのは、「 24bitカラー 」という規格です。

24ビットカラーでは、赤色(R)、緑色(G)、青色(B)の強さを、それぞれ0〜255までの256段階で表現します。各色成分の強度を、それぞれ英語の頭文字を取って R、G、B などと呼び、まとめてRGB値と呼びます。

具体的には、純粋な青色は ( R=0, G=0, B=255 ) と表現し、純粋な黄色なら ( R=255, G=255, B=0 ) と表現します。

それぞれの色成分の強度は、256段階なので 8bit で表現可能で、三色まとめると 24bit で表現できます。つまり一つの色を 24bit の情報量で表現するのが、24ビットカラーという事です。

カラーコード

RGB値を直接使うと、一つの色を表現するのに三つの値が必要です。しかし、一つの色を一つの数値で表現できたほうが、色々と便利な場合があります。そこで用いられるのが、カラーコードです。

カラーコードとは、6桁の16進数で表記した数値であって、一つの数値で24bitカラーの全色を表現する事ができます。

16進数とは、通常のように10で次の位に繰り上がらずに、16で初めて繰り上がるような、数字の数え方です。 慣れないと変な感じもしますが、例えば時計の秒と分は60進数と言えますし、慣れれば割と平気な数え方です。

16進数では、0〜15までを一桁に書く必要がありますが、15などはそのまま書くと二桁です。なので、10〜15 までの数は、アルファベットの a〜f で書きます。具体的には、16進数での数の数え方は：

といったように数えます。ここでffは、10進数に直すと255に相当します。

つまり、2桁の16進数 00 〜 ff までで、ちょうど三原色の一つの強度を表す事が可能です。

従って、6桁用意して、頭から2桁ずつ赤色、緑色、青色を表すようにすれば、6桁の16進数 000000 〜 ffffff で、24ビットカラーの任意の色を表現する事ができます。

これが、カラーコードの規格です。なお、カラーコードは、頭に「 # 」記号を付けて記載するのが一般的です。

---

スポンサーリンク

---

コード解説

概要

このプログラムでは、カラーコードとRGB値を相互変換し、ついでに色も表示するようなものになっています。

コード全体

まず、このプログラムのコード全体を掲載します。少し長いですが、以下の通りです。

以上です。それでは、細部を見ていきましょう。

GUIに関する解説はガイドで

上で掲載した通り、コード内容はある程度の長さをもっていますが、その大半はGUI（画面部品）の構築と制御に関する部分です。

このプログラムでは、GUIでは特別な事は行っておらず、基本的な処理が続いています。それらを解説しても無駄に長くなってしまうので、ここではGUI関連の解説は割愛します。

なお、GUIの構築と制御に関する基本的な内容は、以下のガイドで解説していますので、そちらをご参照下さい。

• VCSSL GUI開発ガイド

先頭領域

以降は、このプログラムの中核的な部分を見ていきましょう。

まずプログラムの先頭領域では、標準ライブラリから、GUIを扱う「 GUI 」と、数学関数を扱う「 Math 」、文字列の解析を行う「 Text 」、色を扱う「 Color 」を読み込んでいます。

加えて、int型の使用を補助してくれる「 system.Int 」も読み込んでいます。 今回はこのライブラリを、GUIからの入力値が数字かどうか判定するのに使用します。

起動時の処理など

続いて、プログラム起動時の処理などです。

最初の main 関数は、グローバル領域の初期化が終わった時点で、システムから自動でコールされる関数です。実質的にはここがプログラムの実行開始地点（エントリーポイント）のようなものになります。 今回のmain関数は、後述のinit関数を呼ぶだけの内容となっています。

続くinit関数ですが、まずcreateComponent関数を呼んで画面のGUIを構築しています。このcreateComponentもプログラム中に記述した関数ですが、ひたすらGUI部品を生成して配置する作業が続いているだけなので、詳細は割愛します。

init関数ではその後、コンソールが不要なので、システム関数の hide をコールして非表示にしています。こうするとコンソールが閉じられなくなり、そのままではプログラムを終了させる手段が無くなるので、別途メインウィンドウを閉じた時点で eixt をコールして終了するようにもしています。詳しくはonWindowCloseイベントハンドラの記述をご参照下さい。

最後に続くのは、メインウィンドウを閉じた際に実行終了するかどうかを、外部から指定するための関数などです。 今回のプログラムは、別のプログラムから呼び出し、部品モジュール（色エディタなど）として使う事も想定しているため、このようなものを用意しています。単体動作なら無くても問題ありません。

setColorByCode関数

続いて、中核処理の一つ、setColorByCode関数を見てみましょう。

この関数は、カラーコードを文字列で受け取って、それが表す色を設定する関数です。具体的には、その色を色見本ディスプレイ部に表示し、RGB値に変換した数値も表示します。

少し長い関数なので、頭から見ていきましょう。

最初に行っているのは入力値のテストです。 受け取ったカラーコードの先頭に「#」記号が付いていればそれを削除し、変わりにint型で16進数を表すプレフィックス「0x」を付加しています。

そしてそれが16進数として正しい内容かどうかを、open.system.Int ライブラリの isHex 関数でテストしています。

続いてさらに、入力値がカラーコードとして適切な範囲（ 000000 〜 ffffff ）に収まっているかをテストしています。

最後に、これらのテストをパスしてきた場合、その色を設定する処理を行っています。

まず行っているのが、カラーコードからRGB値への変換です。これは独自にコードを書いても比較的簡単に実装できますが、色を扱う標準ライブラリである「 Color 」に用意されているので、それを使っています。 変換を行うのは color( int colorCode ) 関数で、この関数は引数をカラーコードと見なして解釈し、RGBA値を格納する int[4] 配列として返してくれます。 RGBAというのは、RGBに透明度（α値）を加えた規格ですが、今回はα値は使わず、RGBの値だけを使います。

続いて、取得した色を色見本ディスプレイに表示させています。これに用いている setDisplayColor 関数は、このプログラム内に実装されています。

最後に、色配列の [0], [1], [2] が R, G, B値なので、その値を画面に表示させています。これに用いている setRgbField 関数も、このプログラム内に実装されています。

setColorByRgb関数

続いて逆変換、つまり RGB値 からカラーコードへの変換です。

これも最初のほうは、入力値が整数か、0〜255までの範囲にあるかなどのテストを行っています。

最後に、テストをパスした場合、その色を設定する作業を行っています。

まず、R, G, B値をまとめて色配列を作成しています。その際、最後にもう一つ、透明度を表す「α値」成分を加えています。α値は255としていますが、これは完全に不透明である事を意味します。

続いて、取得した色を色見本ディスプレイに表示させています。先にも述べましたが、これに用いている setDisplayColor 関数は、このプログラム内に実装されています。

その後、色配列をカラーコードに変換しています。これも比較的簡単に実装できますが、Colorライブラリに getColorCode( int rgba[] ) として既に用意されているので、それを利用しています。

取得したカラーコードは int 型なので、Mathライブラリの hex( int value ) 関数で、16進数表記の文字列に変換しています。この際、先頭にプレフィックス「 0x 」が付加されます。

そして、16進数表記したカラーコードをさらに、カラーコードとして適切な形に整形しています。具体的には先頭の「 0x 」の除去と、必要に応じて先頭を「 0 」で埋めて6桁にするなどです。 これに用いている formatColorCode 関数は、この関数のすぐ後に実装されています。

最後に、取得したカラーコードを画面に表示させています。これに用いている setCodeField 関数も、このプログラム内に実装されています。

ライセンス

このVCSSL/Vnanoコード（ 拡張子が「.vcssl」や「.vnano」のファイル ）は実質的な著作権フリー（パブリックドメイン) である CC0 の状態で公開しています※。 記事中にC言語/C++/Java言語などでのサンプルコードが掲載されいてる場合は、それらについても同様です。 そのままでのご利用はもちろん、改造や流用などもご自由に行ってください。

※ ただし、このコードの配布フォルダ内には、ダウンロード後すぐに実行できるように、 VCSSLの実行環境も同梱されており、そのライセンス文書は「 License 」フォルダ内に同梱されています （要約すると、商用・非商用問わず自由に使用できますが、使用の結果に対して開発元は一切の責任を負いません、といった具合の内容です）。 配布フォルダ内の各構成物の一覧やライセンスについては「 ReadMe_使用方法_必ずお読みください.txt 」をご参照ください。

※ Vnano の実行環境については、別途スクリプトエンジンのソースコードも一般公開しており、 何らかのソフトウェア内に組み込んでご利用いただく事も可能です。詳細はこちらをご参照ください。

この記事中の商標などについて

• OracleとJavaは、Oracle Corporation 及びその子会社、関連会社の米国及びその他の国における登録商標です。文中の社名、商品名等は各社の商標または登録商標である場合があります。
• Windows は、米国 Microsoft Corporation の米国およびその他の国における登録商標です。この記事は独立著作物であり、Microsoft Corporation と関連のある、もしくはスポンサーを受けるものではありません。
• Linux は、Linus Torvalds 氏の米国およびその他の国における商標または登録商標です。
• その他、文中に使用されている商標は、その商標を保持する各社の各国における商標または登録商標です。