DxLibraryでカラーパレット、カラーピッカーを作ったよ！

C

ペイントソフトだったら大抵あるいろんな色が並んだパレット。クリックした部分の色が抽出されますよね。あれをDxLibraryで実装してみました。

理論
色には「色相」「彩度」「明度」の三属性があります。
「色相」はいわゆる「赤」や「青」といった色が分かれてる感じのことです。
「彩度」は鮮やかさ。彩度がないと色は灰色になってしまいます。
「明度」は明るさ。明るければ白に、暗ければ黒になります。
今回のプログラムでは、そのうちの「色相」と「彩度」のみを意識して作成しました。
「色相」の変化について
コンピュータでは、色を「Red」「Green」「Blue」の三色に分けて扱っています。各色は、0から255までの256段階で明るさを管理されています。たとえばRedが255、あとの2つが0なら「赤」になるわけです。
ここで、色相のみを変化させた場合の画像を表示させます。この画像は、6つのエリアにわけて考えることができます。

  • エリア1……Redは255で固定、Greenは0から255まで変化、Blueは0で固定(最初の赤から黄色まで)
  • エリア2……Redは255から0まで変化、Greenは255で固定、Blueは0で固定(黄色から緑の真ん中まで)
  • エリア3……Redは0で固定、Greenは255で固定、Blueは0から255まで変化(緑の真ん中から水色まで)
  • エリア4……Redは0で固定、Greenは255から0まで変化、Blueは255で固定(水色から青の真ん中まで)
  • エリア5……Redは0から255まで変化、Greenは0で固定、Blueは255で固定(青の真ん中から紫まで)
  • エリア6……Redは255で固定、Greenは0で固定、Blueは255から0まで変化(紫から赤まで、最初の色に戻る)

これのみを意識して表示させた画像がこれです。彩度のみ
次は「明度」の変化についてです。
一番上の横一列を白、一番下を黒とし、その間の色の明度を連続的に変化させます。(ちょうど真ん中に前述の色相を変化させて作成した色が来るようにします)
白のRGB値はRedが255、Greenが255、Blueが255で、黒はRedが0、Greenが0、Blueが0です。
上から下へと彩度が変化するので、縦1列ごとに描画します。
黄色の場合を例に説明すると、
最上(白)R 255 G 255 B 255
↓
中間(黄)R 255 G 255 B 0
↓
最下(黒)R 0 G 0 B 0


ここで、彩度を変えていく時に「均等に」変えていく必要があります。たとえば例のBlueの値は、「中間でちょうど0になるよう」変化させなければなりません。よって、最上から中間、中間から最下までのピクセル数から、RGB値を変化させる量を計算する必要があります。変化量をピクセル数で割った値ですね。これを繰り返し減算していく必要があります。
このようにして彩度も変化させた場合の画像がこれです。彩度と明度

あとは、マウスの状態監視、マウスの座標所得、座標の色取得などで「スポイト」が作れます。この時に、「クリックする度に再描画」させないととんでもなく重くなってしまいます。フラグなどで解消しましょう。

追記
知恵を貸してくれた友人に感謝します