この記事は グラフィックス全般 Advent Calendar 2024 9日目の記事です。
どうも。個人でElectron＆Webなお絵かきアプリ)を作っていたりいなかったりする者です。もう８年くらいやってます。
背景 ～ カラーピッカーを充実させたい
今年の3月の話になりますが、それまで自作のお絵描きアプリではカラーピッカーがHSL一本のみという男らしい状態でした。
従来のカラーピッカー
しかし、そろそろ一般的によくある円形のピッカーも用意したいなぁ…ということで、HSL以外の色空間について調べてみることにしたというのが今回の背景です。
方針
- 円形のカラーピッカーに向いているものを探す（必然的に色相環が作れるものに限る）
- 黄色→青のような難しい色変化を追いやすいものが欲しい
- できるだけカラーバンドの無いものがよい
二つ目の方針について補足すると、たとえば下の画像のようなカラーピッカーでは黄色から青に行こうと直線で移動すると、途中で緑になったり水色になったりします。隣り合わない色相の色遷移は途中で必ず灰色を経由する必要があります。それをやりやすいカラーピッカーが欲しいということです。（説明が難しい…）
三つ目の方針については、下の画像を見ると明らかに他より明るく見える色（黄色、水色、紫）が3方向に見えると思いますが、こういった部分をここではカラーバンドと呼ぶことにします。こういう部分が少ないものがよい、ということです。あっても使えないわけじゃないんですが、ない方が印象が良いと思います。
color-space でカラーサークルを作ってみた
color-spaceを使用すると、簡単に色空間からRGB値を取り出すことができます。
今回はこのライブラリを使って色々な色空間のカラーサークル（カラーホイール）を作ってみました。
各サンプル画像の左側は角度を色相とし、彩度を固定、明度を中心から外へ0→100%と変化させたものです。右側は明度を固定して彩度を中心から外へ0→100%と変化させたものです。
HS系
| カラーサークル | 感想 |
|---|---|
HSV
|
Hue、Saturation、Valueで色が決まる。王道。ほとんどのペイントソフトでこれは入っている。 直感的に分かりやすい。しかしカラーバンドがはっきり見える。 |
HSL 
|
こちらも非常に一般的に使われる色空間。左のはHSVの二つをくっつけたような形になっている。 ペイントソフトでは四角形で使われていることが多いように思う。円形にすると中心に黒が集まりすぎて、いまいち使いづらそうになる。 |
HC系
| カラーサークル | 感想 |
|---|---|
HCG
|
Hue、Chroma、Value で色が決まる色空間。ライブラリからのリンクによると、かつてHCGという名前だったが、医学用語との衝突を避けるためHCVに改名されたらしい。しかし今度はC型肝炎ウィルス(HCV)と被っていたりする。 HSVと非常によく似ているが、中心に黒が集まっているので明るい色が選びやすそう。 |
HCY 
|
Hue、Chroma、Luminance で色が決まる…らしいが、だったらなぜ Y なのか？調べてもよく分からなかった。Yが輝度信号を意味する色空間があるので、それと関係があるのかもしれない。 ミスミソウの葉のような不思議な形が見える。綺麗だが、カラーピッカーとしては使いづらそう。 |
LAB
| カラーサークル | 感想 |
|---|---|
LCHab（右は明度70固定）
|
L、a、bで色が決まる色空間。Lは明度で、aは赤緑、bは黄青の度合い。円形にするにはabをxy座標と考えて計算する。 人間の知覚に近くなるように考案されたものらしい。右のサンプルを見ると、明度に偏りが少なく、まさに明度が固定できているように見える。でもちょっと青が明るく見える気もする。 カラーバンドについては、左のサンプルはなんとも言いがたい形が見えて面白い。中にAIが入ってそう。右はぼんやりとしたカラーバンドが見える。 本来は人間の知覚の研究に向いているらしい。また、LABにはLAB(CIELAB)とLABhunterの二種類があり、今回はCIELABの方の極座標版(LCHab)を使用した。 |
UV系
| カラーサークル | 感想 |
|---|---|
LCHuv（右は明度70固定）
|
L、u、vで色が決まる色空間。Lは明度で、uは赤緑、vは黄青の度合い。Labと似ているが何やら歴史的背景があるらしい。 カラーバンドについては、右はLabより偏りが少なく、使いやすそうである。 |
YUV 
|
UV系はなぜかたくさんあるので、色々試してみた。YUVはテレビの映像伝送のための色モデルらしい。 右のサンプルはカラーバンドが少なく色鮮やかで良いのだが、黄色がほとんどオレンジになっているのが惜しい。 |
HSLuv 
|
だんだん混乱してきたが、ライブラリのソースコードを見ると本家HPへのリンクがある。かなりしっかりしたHPが用意してあって、それを見るとCIELUVを彩度を扱いやすく拡張したものらしい。たしかにLCHuvとよく似ているし、値のとり方も同じだった。 ただ、右のをよーく見るとうっすらHSLに似たカラーバンドが見える。伊達にHSLを名乗っていないなという感じがした。 |
HPLuv 
|
ライブラリのソースコードを見るとHSLuvと関係があるのかもしれない。カラーバンドもあまり見えず、改良版という感じもするが、極端に色が淡い。 右はこれで彩度がマックスまで行っているはずなのだがどうにも淡いので、ダメ元で明度を200%にしてみたのが下のもの。結局バンドが出てしまった。 |
自作してみた（色空間ではない）
色々見てみましたが、全体としてバランスがよいのはLCHuvかなぁと思いました。しかし、結局使いやすいのはHSVという感じもしました。そこでアイデア。HSVを単にガウスぼかししただけです。おお、なんか綺麗じゃないですか。ということで、実際に自作のアプリに採用しました。
画像処理してしまいましたし、これは色空間ではないわけですが、本来の目的はカラーピッカーを作りたいということでしたから、そもそも色空間である必要はなかったんですね！（本末転倒
まだまだアドベントカレンダーは続きます。引き続きよろしくお願いいたします！