【jQuery】色相環カラーピッカーを自作する

HTML/CSS JavaScript jQuery

ブラウザJavaScriptで動く色相環つきカラーピッカーが欲しい。
Farbtastic Color Picker という素晴らしい実装が公開されているので、これを使う。終了。

･･ではなく、せっかくなので自分で似たようなのを作ってみた。できたのがこちら･･。



ソースコード(canvasColorPicker.js) →

良い点

  • 大きさ変えるの簡単
  • JSファイルだけで動く（別CSSファイルなし）

悪い点

  • HTML5 Canvas 未対応ブラウザで動かない（IE8等）
  • 処理が重い（遅い）
  • なにこの得体の知れないプログラム？バグってんじゃないの？

と思ったら「Reinvented Color Wheel」という素晴らしいものが公開されていました・・こちらを使わせていただきましょう。。

Reinvented Color Wheel
https://luncheon.github.io/reinvented-color-wheel/

使い方

<!-- カラーピッカーになるDIV要素 -->
<div class="colorPicker"></div>

<!-- jQuery -->
<script src="jquery.js"></script>

<!-- カラーピッカープラグイン -->
<script src="canvasColorPicker.js"></script>

<script>
  // カラーピッカー生成
  var $picker = $('.colorPicker').canvasColorPicker({
    // 最初に選択する色
    color: '#f00',
    // 色が変更されたらコールバックされる関数
    change: function( rgb, hsv ){
      // rgb は整数3つ 0～255 の配列
      // hsv は実数3つ 0～<360, 0～100, 0～100 の配列
    }
  });
</script>

色をセットする

// RGB
$picker.trigger('setRGB', [64,128,255]);
// HSV
$picker.trigger('setHSV', [45,100,50]);

サイズ変更する

$picker.trigger('resized');

破棄する

$picker.trigger('destroy');

実装

いろいろなサイトを有り難く参考にさせていただきました。

Canvasできれいな色相環を描画する
http://imaya.blog.jp/archives/6733658.html


カラーモデルの変換
https://so-zou.jp/web-app/tech/programming/javascript/css/color-model.htm

色相環の中にある、明度（輝度）・彩度を調整するボックスは、HSV矩形にした。
HSV矩形だと下辺はRGBでおなじ黒なので三角形でもよさそうだが、プログラム的に四角の方が楽。
そしてHSL矩形よりHSV矩形の方が右上の色相環の色を選びやすい。