2015年2月19日

輝度(人間の感覚に合った色の明るさ)を基準にした配色ツール

例えば地図の塗り分けなど、同じ明るさで、赤・緑・青など複数の色が欲しいことがしばしばあります。こうした場合、まず試すのはこういったツールで明度を固定して、色相を変化させていくことだと思います。

しかし、同じ明度でも、色相を変えると明るさが違って見えることに気付くと思います。人間の明るさの感覚は色相によって違うために、人間にとっての明るさを等しくするには、輝度という基準を用いなければならないようです。

参考:画像のモノクロ化は輝度で変換しないとヒドイことになる 知らなきゃ絶対損するPCマル秘ワザ

同じ輝度でさまざまな色相の色を得られるようなツールはなかなか見つからなかったのですが、Githubで見つけました。

jQuery Color Picker Sliders

リンク先の真ん中当たりまでスクロールするとA full-blown example showing all the sliders in actionというセクションがあり、下にいろいろなバーがありますが、輝度をそろえるためには下の方の「CIE-Lightness」「CIE-Chroma」「CIE-hue」を使います。「CIE-Lightness」「CIE-Chroma」を適当に設定したうえで、「CIE-hue」を動かすと、最下部のの色サンプルが変化していき、最上部の数値も変化していきます。これらの色は人間の感覚で同じ明るさとなっています。

注意として、「CIE-Lightness」「CIE-Chroma」の値によっては、「CIE-hue」が一部しか表示されません。これは、その値がRGBで表現できないことを意味しているようです。無理やり矢印を無いところに動かすと!マークが出て、最も近い色が表示されます。

※筆者は色彩の専門家ではないので、学術的な正しさは保証できません。