画像を読み込んでCanvasへ描画する流れ
本ツールの色抽出は，利用者が端末上の画像ファイルを選ぶところから始まります．ファイル選択ダイアログまたはドラッグ＆ドロップで指定したファイルをFileReaderで読み，Data URLにしてImageオブジェクトへ渡します．画像としてデコードできた場合に，ブラウザの2D Canvasへ描画して色を調べられる状態にします．
読込，画像デコード，Canvas描画，色取得は，このページを開いているブラウザ上の処理です．
デコード後の画像が幅800ピクセルまたは高さ500ピクセルを超える場合は，縦横比を保ち，両方の上限内へ収まる倍率で縮小します．例えば1600×1200の画像は約667×500，横長の2000×500は800×200のCanvasになります．上限内の画像は自然寸法のまま描画します．この上限は画面上で選びやすくし，後続処理の対象となるCanvasを一定範囲に収めるためのものです．
重要なのは，本ツールが元画像ファイルの圧縮前データやRAW画素を直接読んでいるわけではないことです．ブラウザはファイルを画像としてデコードし，必要ならdrawImage()で縮小してからCanvas画素を作ります．大きな画像のCanvas上の一画素は，元画像の複数画素を再サンプリングした結果になり得ます．
縮小方法，カラープロファイルの扱い，色空間変換や数値精度も処理経路に含まれるため，元ファイル内の値と全ブラウザで完全に同じになるとは限りません．
ファイル選択欄のaccept="image/*"は，画像候補を選びやすくするためのヒントです．特定の拡張子を必ずデコードできると保証する検証ではありません．本ツールは読込時にMIMEタイプが画像かを基本確認し，FileReaderの失敗またはImageのデコード失敗を画面へ表示します．
実際の対応可否は利用ブラウザの画像デコーダーに依存します．また，最終的なCanvasが最大800×500でも，その前にファイル全体の読込と元の画像寸法でのデコードが必要なので，非常に大きい画像では時間やメモリを多く使う場合があります．
ポインター位置の色取得と11×11画素の拡大鏡
Canvasには，CSSで画面上に表示される幅・高さと，canvas.width・canvas.heightが表す内部ビットマップの幅・高さがあります．レスポンシブ表示でCanvasが画面幅に合わせて縮んだ場合，この二つは同じではありません．そのため本ツールは，クリックやタップのclientX・clientYからCanvasの表示矩形の左上を引き，表示幅に対する内部幅，表示高さに対する内部高さの比率を掛けて，Canvas内部の座標へ換算します．
換算値はMath.floor()で整数化し，横は0〜canvas.width-1，縦は0〜canvas.height-1へ収めます．この境界処理により，右端や下端の操作でCanvas外の座標を要求しないようにしています．得られた位置についてgetImageData(x, y, 1, 1)を呼び，幅1・高さ1のCanvas画素からRGBAの4成分を取得します．
マウスクリックでもタップでも，この操作時点の座標から選択色を決めます．
マウスを画像上で動かした場合は，現在位置の色をホバー表示するとともに拡大鏡を描きます．拡大鏡の元になるのは，元画像ではなく，現在表示しているメインCanvasの周辺11×11画素です．この領域を別の120×120 Canvasへ拡大し，imageSmoothingEnabledをfalseにして各画素の境界をぼかさず表示します．
白い枠は11×11領域の中央画素を示し，周囲との色の違いを目で比較しやすくします．
この拡大鏡は選択位置を見分けるための表示補助であり，画像自体を任意の倍率に変更するズーム機能ではありません．元画像の一画素未満の情報を復元することもできません．タッチ操作ではマウスのような継続的なホバー状態がないため，タップで色は選択できますが，拡大鏡を常時追従表示する操作にはなりません．
HEX・RGB・HSLへの変換と透明度の扱い
getImageData()から得る標準的な画素配列は，Red，Green，Blue，Alphaの順に各成分を0〜255の値で持ちます．本ツールはこのうちR・G・Bを使い，画面とクリップボード向けに6桁HEX，rgb()，hsl()の三形式を作ります．alphaは内部の画素配列にはありますが，選択色の表示・コピーには使いません．
HEXはR・G・Bをそれぞれ二桁の16進数へ変換し，#の後へ連結します．値が一桁なら先頭に0を加えるので，R=79，G=70，B=229は#4f46e5になります．RGBは同じ整数をrgb(79, 70, 229)の形にします．各値は念のため0〜255へ収めて整数化してから文字列にします．
HSLはR・G・Bを255で割って0〜1へ正規化し，最大値と最小値，両者の差からHue，Saturation，Lightnessを計算します．画面では色相を度，彩度とHSL明度を百分率にして，最終表示だけ整数へ丸めます．HSLはCanvasから返されたsRGBのRGB値を別の座標表現へ変換したもので，元画像の別の色空間や印刷用データを読み出す機能ではありません．
半透明画像では，RGB値だけでは画面上の見た目を再現できない点に注意が必要です．同じRGBでもalphaが異なれば，背景と合成したときの見え方は変わります．本ツールはalpha付き8桁HEX，rgba()，背景色と合成した結果を出力しません．透明または半透明の位置を選んでも，表示する6桁HEX・RGB・HSLはCanvasから得たRGB部分だけです．
画像デコードやCanvas内部のalpha処理を経るため，特に不透明でない画素では元ファイル内の数値との差が生じる場合もあります．
最大6色の代表色候補を選ぶ簡易処理
個別の位置を手動で選ぶ機能とは別に，本ツールは画像内で頻度が高い色の傾向を簡易的な代表色候補として示します．対象は元画像の全画素ではありません．最大800×500へ描画したメインCanvasを，さらに幅80・高さ60のオフスクリーンCanvasへ縮小し，最大4,800画素にした結果を使います．この二段階の縮小により，細い線や小さな領域の色は薄まるか，候補に現れないことがあります．
80×60 CanvasのRGBAを順に調べ，alphaが128未満の画素は集計から除外します．alphaが128以上の半透明画素は，背景との合成色を作らずRGB部分だけを集計します．次にR・G・Bをそれぞれ32で割って四捨五入し，再び32を掛けた値をバケットのキーにします．近いRGB値を同じ量子化グループへまとめ，そのグループに入った画素数を数えます．
頻度の高いバケットから候補を調べますが，表示色に使うのはバケット中心や平均値ではなく，そのバケットへ最初に入った実際のサンプル画素のRGBです．既に採用した色がある場合は，R・G・Bそれぞれの差を二乗して合計し平方根を取る単純なRGBユークリッド距離を求めます．
この距離が60未満なら近すぎる候補として飛ばし，60以上なら採用します．この手順を最大6色になるまで続けます．画像の色数や透明画素，距離条件によっては6色未満です．
この処理は，頻度の高い量子化RGBグループから見分けやすい候補を並べるためのヒューリスティックです．LabやOKLab，Delta Eによる知覚色差，階層クラスタリング，平均色やクラスタ中心，AIによる画像理解は使いません．人が見て最も重要な色，ブランドの正確な基準色，画像の支配色の正解を判定する機能でもありません．採用前には，手動スポイトで必要な位置を選び，実際の画像と数値を確認してください．
個別コピーとページ内だけの一時パレット
画像上で選んだ色，または代表色候補から選んだ色は，右側の「選択された色」へ反映されます．色見本と6桁HEXを表示し，その下にHEX，RGB，HSLの読取専用欄を別々に置きます．各欄のコピーボタンは，その一形式だけをnavigator.clipboard.writeText()へ渡します．三形式やパレット全体を一括でコピーする操作ではありません．
Clipboard APIの処理は非同期なので，本ツールは書込みPromiseの完了を待ちます．成功した場合だけチェック表示とコピー完了文を出し，約2秒後に表示を戻します．ブラウザ環境，権限，ページの実行条件等で失敗した場合は成功扱いにせず，読取専用欄の値を手動で選択するよう案内します．したがって，どの環境でも必ずコピーできることを保証するものではありません．
「マイパレットに追加」を押すと，現在の選択色をページ内の一時パレットへ加えます．同じHEXが既にある場合は重ねて追加しません．一時パレットの色を選び直すこと，個別に削除すること，全件を消すことができます．これはReactの画面状態として保持しているだけで，localStorageや外部ストレージには保存しません．
ページを再読込すると消え，ファイルへの書出し，共有URL，複数色の一括コピーも行いません．残したい値はページを離れる前に個別にコピーしてください．
対応範囲，色の精度，非対応機能
本ツールは，ブラウザがデコードしてCanvasへ描画できる画像から，描画後のCanvas画素色を確認するためのツールです．画像ファイルのICCプロファイルを表示・変更したり，Canvasの色空間を利用者が指定したりする機能はありません．元ファイルの厳密な画素値が必要な検査，RAWデータ解析，印刷物の色校正には使えません．
縮小再サンプリング，ブラウザの画像デコード，色管理，半透明画素の処理を含む結果として扱ってください．
また，EyeDropper APIは使っていません．選べるのは本ツールのCanvas上で読み込んだ画像の位置で，ブラウザの別領域，デスクトップ，他のアプリの色は取得できません．出力する色形式は6桁HEX，RGB，HSLです．CMYK，Lab，LCH，OKLab，OKLCH，Delta E，alpha付き色には対応しません．
画像編集，トリミング，色置換，補正後画像の保存，CSSコード生成も行いません．
選択画像の読込，Canvas描画，単一点の色取得，代表色候補の計算はブラウザ上のFileReader・Image・Canvas・JavaScriptで行います．ただし，FileReaderを使うという事実だけから，ページ表示，広告，アクセス解析，共通機能，ブラウザ拡張等を含むWebページ全体の通信がゼロであることや，情報漏洩の可能性が完全にないことまで保証する説明にはなりません．
機密画像を扱う場合は，利用環境とサイトのデータ取扱方針も確認してください．
代表色候補は80×60の縮小サンプル，32刻みのRGB量子化，単純RGB距離による簡易処理です．色の重要度，知覚的な近さ，文字と背景のコントラスト，配色品質，ブランド適合性を評価しません．抽出した色をUIで使う場合は，実際の前景色と背景色の組合せを別途確認し，必要に応じてコントラストチェッカーや配色候補ツールへ値を渡して判断してください．