制作メモ作ったものを見せびらかしたり解説したりします。自作ゲームやクリエイティブコーディングの話が中心です。Qiitaの20日目の記事です。一言でいうと、RGBやHSB以外にも色の指定方法があるよというお話です。いわゆる配色理論の話にはまだ辿り着いていません。いう話をまったく書けておりません......。一応末尾に参考リンクを貼っているので見ていただきたいのですが、自分で変換処理を書くのはたぶんちょっと面倒。私の(合ってるか分かんないのですが)オレオレ実装がこちら、あと探せば他にもライブラリや実装例があるはず。概観HSBとCIELABXYZとsRGBおまけこの記事の趣旨このたび次のようなスケッチを作りました。マウスボタン(またはタッチ)でちょっとだけ動きが変化します。色の指定を楽にやろうとした結果、このスケッチではCIELAB色空間というものを使いました。調べる過程は楽するどころか大変だったし、力尽きてメインのプログラムはてきとうになってしまったのですが、せっかくなので調べたことを記録しておきたいと思います。毎度のことですが私はネットで少しググっただけの素人です。色彩工学という分野の話なのですが、色彩の話は(少なくとも素人の私からすると)とても込み入っていて、間違ったことを書いてしまう可能性がかなり高いです。何かおかしい点があればご指摘いただけると幸いです。目的:色をシステマチックに扱いたい何か色のあるものを作ろうとすると、問題になるのが配色です。プログラミングという手段があるので、手作業で色を調整するよりも、プログラムでランダムに生成したい。完全にランダムだとみっともない配色になる。何かしらの機械的な規則や手順で、統一感のある配色を生成したい。その第一歩として、まずは個々の色をシステマチックに生成・操作できる仕組みが必要だ。基礎知識:色空間とは次に述べるRGBが代表例ですが、色を数字で指定しようとすると、3種類の数字が必要になります。変数が3種類ということは、3次元の空間にプロットできることを意味します。これが色空間と呼ばれるものです。Wikipediaよく知られているRGB以外にも、様々な色空間(つまり、どんな変数を用意すれば色を表せるか)が考え出されています。基本の色空間「RGB」コンピュータで色を指定するための最も基本的な方式がRGBです。三色を混ぜ合わせる割合を変えることで様々な色が作れます。コンピュータのディスプレイは、まさにこうやって三色の組み合わせで光を出す仕組みになっています。RGB加法混色RGB色空間の欠点これの欠点は、どの色をどのくらい混ぜると結果どんな色になるのか、経験がないと想像できないところ。これは、既存のパレットから色を選んだり、結果を見ながら手で微調整したりする分には、たいした欠点にはならないかもしれません。直観的なパラメータを指定するだけで色を作れたほうが便利です。なにより、色のランダム生成に向いていない。こちらの記事でも書かれていますが、適当に混ぜると「素人っぽい配色」になってしまいます。Brightness)というカラーモデルです。Value)とも呼ばれますが同じものです。HSVの方が優勢かも。いう、人間から見ても分かりやすい三要素を使って色が作れます。色相は赤っぽいとか青っぽいとかの違いで、彩度は鮮やかさのことですね。「もっと鮮やかに」「もっと暗く」みたいな操作をダイレクトに行えます。RGBよりも統一感のある配色を作りやすい例えば彩度・明度を一定にしたまま色相だけをランダムにすると、ある程度統一感を保ったままカラフルな状態が作れます。Processingでも標準で使えるようになっていて、プログラムで絵を描くときには重宝します。明度100%人間とコンピュータの橋渡し的な位置にいるHSBは、表面的には違っても内部的にはRGBの亜種みたいなもので、RGBとの変換が容易です。人間から見て分かりやすく、かつコンピュータでも計算しやすい。このため、コンピュータで色のデザインをするのに広く使われる方式となっています。多くの場合「HSBは便利!」で話が終わるのですが、問題はここからです。使っていると、実はいろいろ不満も出てくるのです。同じ明度でも色相によって実際の明るさが違う淡い配色をしようとすると、この欠点が顕著に出ます。三要素に分けたからには、それぞれが独立しているのが本来の姿です。色相を変えただけで明るさまで変わってしまうのは困る。勝手にコントラストが生まれるので都合がいいという場合も無くはないのですが、本当ならそれも意識的にやりたいところです。均等色空間ではないので色の変化にばらつきがある均等色空間というのはおおざっぱに言うと、パラメータの数値を10から20に変えたときと、70から80に変えたときとで、結果の色が(人間から見て)同じくらい変化する、ということです。HSBの色相が均等でないという点について、こちらの記事が分かりやすいです。普段HSBを使っていても、なんか緑の領域が妙に広いなぁ、と感じることは確かに多いです。Spice色相を360°の円として並べたものを色相環と言います。HSBの色相環は、RGBの三原色が単純に0°・120°・240°の位置にくるように作ったものなので、人間から見て均等かどうかは考慮されていません。「配色理論」でググるとわかりますが、多くの理論は色相環上の角度の違いを問題にしています。色相が均等でないと、そもそもこれらの配色理論を適用できるのかどうかも疑問が出てきます。上記の欠点を克服することを意図された色空間はいくつかあります。そのうちの一つがCIELABです。WikipediaCIEというのは国際照明委員会という団体です。ちなみにCIELABはPhotoshopでも採用されているようです。b*下記の3つの変数で色を指定します。a*とb*を両方0にすると無彩色になります。Lightness、明るさ。パラメータa*とb*の代わりに、次のように極座標で表すこともできます(CIELChと呼んだりする)。Chroma(彩度)の略。平面上の中心から見た角度なぜアスタリスクがついているのかというと、詳細は割愛するが歴史的な理由があるのだ。エルスター、エースター、ビースターと読むらしい。RGB/HSBからのマッピング実はRGBでは現実に存在するすべての色を表せない。HSBも、RGBを変形しただけの空間なので同様である。CIELABは、ヒトが認識できる色のほぼすべてを含みます。空間が広いので、ヒトには認識できない色の方が多かったりする。RGB色空間の(つまり、ディスプレイで表示可能な)すべての色をCIELAB色空間にマッピングすると、次の画像のように、ちょっと歪な形になります。(横軸がa*、縦軸がb*。妥協して、範囲外の色はRGB色空間内の似たような色で間に合わせるようにしてしまえば、あとは前述のCIELChをHSBと似たような感覚で使えるようになります。色相以外のパラメータはなんとなく目分量で、CIELABとHSBで似たようなテイストになるようにしました。*1こちらがHSBの色相環。L*=80)色相以外は固定しているので、できるだけ見た目の明度や彩度のコントラストが無いほうが良いわけです。この点、CIELABの方がコントラストが控えめになっているのが分かるでしょうか。色の均等性についてはこの例だとちょっと分かりませんね......。上のCIELABの図では水色がいくつも続いてしまっていますが、これは青系が他の色よりもRGB領域から離れてしまう度合が高いせいだと思われます(前項のRGB色域の図でも、RGBの青系の領域が狭いのが分かります)。RGB範囲外の色をクリッピングせざるを得なかったため、少しCIELABの利点を損なっている部分はあるのですが、理論的には改善されているはずです。まとめ以上、RGB色空間やHSB色空間にはいくつか欠点があって、CIELAB色空間である程度改善されるというお話でした。黄色と緑が明るすぎ問題については解消できました。いわゆる配色理論にはまだ一歩も踏み込んでおらず、ようやく入り口に立ったという感じです。あと、RGBとCIELABとの相互変換を自分で実装してみたのですが、芋づる式にXYZ色空間とか、sRGB色空間とかガンマ補正とか、ここには書かなかった知識についてもいろいろ調べ回るはめになってしまいました。他にも、人間の色の認知において色は平等ではないとか、マンセル・PCCS・NCSなどのカラーシステム、などなど。こんな広くて深い世界だとは知らなかった......。タイトルに「巻」とか付けちゃいましたが次巻の予定はまだないです。Spaceもろもろの色空間やカラーモデルの概要について、私が見つけた範囲で最も簡潔にまとまっていると感じた記事です。WikipediaHSBの欠点について詳しく書かれています。WikipediaLabの説明。(英語)Wikipediaだけでもたくさんの情報があり、キーワードの関係を把握するのにだいぶ時間がかかります。spaceCIELAB色空間に関する日本語の解説です。Qiitaこの記事では話さなかった、XYZ色空間に関する日本語の詳しい解説です。CIELAB色空間はこのXYZ色空間から派生したものです。CIELABで指定した色をディスプレイに表示するためには結局RGBに変換する必要がありますが、その際、XYZ色空間を経由しなければなりません。XYZ色空間は、CIELABに限らず他の様々な色空間を変換するときにも中継地点としてよく使われます。BlogRGBと一言で言っても、実は線形RGBとsRGBを区別しなければならず、sRGBにするためにガンマ補正というものが必要になるというお話です。イメージスキャナ開発室ガンマ補正に関する、さらに詳しい情報です。上記の記事と合わせて。http://www.color.org/chardata/rgb/sRGB.pdfXYZ色空間から線形RGB空間を経由してsRGB色空間に変換するための式や数値の公式情報です。Wikipediaに書いてある情報はどうも最新ではないらしく、この2015年4月の改定が今のところ最新かと思われます。おまけ過去に、RGB色空間→CIELAB色空間のマッピングを3Dでやったときのやつです。変換が不正確な可能性あり。