ツール|画像の色を取得(RGB・HSV)

選択した画像ファイルまたはクリップボードから貼り付けた画像の色を取得します。RGB、16進数カラーコード、HSVに対応。
または
・画像をドロップ
・クリップボードから貼り付け (Ctrl + v)
#FFFFFFrgb(255,255,255)
hsv(0°, 0%, 100%)
クリックした色を記録します
※画像が1920×1080より大きい場合は縮小して表示します。
※クリップボードからの貼り付けはIEではできません。
※このツールは通信を行わずブラウザ内で動きます。読み込んだ画像を外部に送信することはありません。
- Webツール

↓色空間の変換はこちら。
ツール|色の変換(RGB・HSV・HSL)

RGB(カラーコード)

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

HSV

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


ネットサーフィンしていて「お、この色すてき!」ってなったときに使いたくて作ったツール。

まぁペイントでもスポイトはできるのだが、手順が少々面倒。

  1. スクショ撮る
  2. ペイントに貼り付ける
  3. 「色の選択」を選ぶ
  4. スポイトしたい箇所をクリック
  5. 「色の編集」を開く
  6. 10進数のRGB値、HSV値が出る

で、たいてい16進数のカラーコードが欲しいから別途変換する。だるいわぁ!

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

このサイトはGatsby.js (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');
    // キャンバスクリア
    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);
}
- Webツール

矢野ヒロタ /1988年生まれ。プログラマー、会社員。仕事で培ったWebやスマホアプリの技術を発信すると見せかけてもっぱら妄想を綴っています。よしなに。