colorize 画像カラーピッカー star

色の取得の仕組み

写真をアップロードすると、ブラウザ内のHTML5の<canvas>要素上にその画像が描画されます。画像上の任意の場所をクリックすると、canvas APIの関数であるgetImageData()がそのピクセル座標で正確に呼び出され、そのピクセルに保存されている生の赤・緑・青・アルファチャンネルの値が返されます — これはスクリーンショットからサンプリングした近似値ではなく、ブラウザ自身が画像を描画するために使用しているのと同じ数値データです。この生の値は、HEX(例: #3a7bd5)、RGB(例: rgb(58, 123, 213))、HSL(色相・彩度・明度)の3形式に同時に変換されて表示されるため、デザインツールが必要とするどの形式もすぐにコピーできます。

この方法で処理されるすべての画像は、デジタル写真、画面、カメラの大多数が使用する標準的な色空間であるsRGBとしてデコードされ、読み取られます。画像が別のカラープロファイルを明示的に埋め込んでいない限り、これが既定として扱われます — 一般的な写真やウェブ画像のほぼすべてがこれに該当します。

知っておくべきこと

• どこにもアップロードされません — 画像の描画からピクセルデータの読み取りまで、すべての処理はブラウザのメモリ内でローカルに行われます。サーバーが写真を受け取ることは一切ありません。
• 読み取り値は推定ではなく正確な値です — getImageData()が保存されているピクセル値そのものを返すため、精度は画像自体の品質とクリックした位置の正確さだけに左右され、画面の輝度やコントラスト、キャリブレーションには影響されません。
• 圧縮によって実際の色がわずかに変化することがあります — JPEG圧縮は小さなピクセルブロック単位で色を平均化するため、強く圧縮された写真は元のシーンの色とわずかに異なる値を返すことがあります。PNGなどの可逆形式は取得した値をそのまま保持します。
• 選んだ色はすべて蓄積パレットに追加されます — 画像の下に表示され、1枚の写真から空、シャツ、壁など複数の点をサンプリングし、1回のセッションで小さくまとまったカラーセットを書き出すことができます。