画像から色を取得（RGB・HSV） ／ ツール
画像の選択箇所から色をRGB・カラーコード・HSVで抽出するスポイトツールです。
or 画像ファイルをドロップ
or 画像を貼り付け (Ctrl + v)
#FFFFFF
rgb(255,255,255)
hsv(0°, 0%, 100%)
クリックした色を記録します。
ツールの使い方
- 画像選択：ファイルを選択ボタンまたはドラッグ＆ドロップで画像ファイルを指定、もしくはクリップボードからの貼り付けで画像を設定してください。
- 画像が1920×1080より大きい場合は縮小表示します。
- 画像はブラウザ内でのみ読み込みます。外部へは送信しません。
- 色の取得箇所を指定：読み込んだ画像にカーソルを当ててください。カーソル箇所の色を取得して表示します。
- 色を保存：クリックすることで色を一時的に保存できます。
- 保存した色はブラウザを閉じたりページを再読み込みしたりすると消えます。Cookie等への保存はしていません。
関連ツール：RGB・16進数カラーコード・HSV・HSLの相互変換 ／ ツール。
RGB・カラーコードとは？
光の三原色と呼ばれる赤（Red）、緑（Green）、青（Blue）を混ぜて色を表現します。ディスプレイなどで使われており、機械にわかりやすい表現です。RGB値を16進数で表記した文字列をカラーコードやウェブカラーと呼ぶこともあります。
HSVとは？
色相（Hue / 色の種類）、彩度（Saturation / 鮮やかさ）、明度（Value / 明るさ）の三つの成分で色を表現します。人間にわかりやすい表現です。
補足
ペイントでもRGBなどを取得できますが手順が少々面倒です。
- ペイントで画像を開く
- 「色の選択」を選ぶ
- スポイトしたい箇所をクリック
- 「色の編集」を開く
- 10進数のRGB値、HSV値が出る
- 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);
}