画像から色を取得（RGB・HSV） ／ スポイトツール

画像の選択箇所から色を取得するスポイトツールです。RGB、16進数カラーコード、HSVに対応しています。

1. 画像選択：「ファイルを選択」または「ドラッグ＆ドロップ」で画像ファイルを指定、もしくは「クリップボードからの貼り付け」で画像を設定してください。
   • 画像が1920×1080より大きい場合は縮小表示します。
   • 画像はブラウザ内でのみ使用し、外部へは送信しません。
2. 色の取得箇所を指定：読み込んだ画像にカーソルを当てると、カーソル箇所の色を取得して表示します。
3. 色を保存：クリックすることで色を一時的に保存できます。
   • 保存した色はブラウザを閉じたりページを再読み込みしたりすると消えてしまいます。Cookie等への保存はしていません。

関連ツール：色の変換（カラーコード・RGB・HSV・HSL） ／ ツール。

RGB・カラーコード・HSVとは？

RGB・カラーコード

光の三原色と呼ばれる赤（Red）、緑（Green）、青（Blue）を混ぜて色を表現します。ディスプレイなどで使われており、機械にわかりやすい表現です。RGB値を16進数で表記した文字列をカラーコードやウェブカラーと呼ぶこともあります。

HSV

色相（Hue / 色の種類）、彩度（Saturation / 鮮やかさ）、明度（Value / 明るさ）の三つの成分で色を表現します。人間にわかりやすい表現です。

補足

ペイントでもRGBなどを取得できますが手順が少々面倒です。

1. ペイントで画像を開く
2. 「色の選択」を選ぶ
3. スポイトしたい箇所をクリック
4. 「色の編集」を開く
5. 10進数のRGB値、HSV値が出る
6. 16進数のカラーコードが欲しければ別途変換

と、面倒なのでツールにしてみました。クリップボードからcanvasに貼り付けるのが地味に苦労して、けっきょくIEだけ諦めました。IEもうお前は知らん。

このサイトはGatsbyJS (React) なので、こんな感じで実装しています。もっといい方法があったら教えて頂けると嬉しいです。

componentDidMount() {
  document.addEventListener("paste", this.onPaste, false);
}

onPaste(e) {
  var data = e.clipboardData;
  if (!data
    || !data.types
    || data.types.length !== 1
    || data.types[0] !== 'Files') {
      return true;
  }

  var file = data.items[0].getAsFile();
  var img = new Image();
  img.onload = function() {
    var cvs = document.getElementById('my_canvas');
    var ctx = cvs.getContext('2d');
    // canvasクリア
    ctx.clearRect(0, 0, cvs.width, cvs.height);

    if (cvs.width < img.width || cvs.height < img.height) {
      // canvasサイズを超えている場合、アスペクト比を維持して縮小
      var scale = Math.min(cvs.width / img.width, cvs.height / img.height);
      ctx.drawImage(img, 0, 0, img.width * scale, img.height * scale);
    } else {
      ctx.drawImage(img, 0, 0);
    }
  };
  img.src = window.URL.createObjectURL(file);
}