画像から色を抽出（カラーピッカー）

使い方

1. 「画像を選択」から画像を選びます。ドラッグ＆ドロップや、コピーした画像の貼り付け（Ctrl+V / ⌘V）でも読み込めます。
2. 画像の上でカーソルを動かすと、画像の下の拡大表示（11×11ピクセル）で周囲のピクセルを確認できます。細かい部分は表示倍率を2×〜8×にすると選びやすくなります。
3. 色を取りたい位置をクリック（タップ）すると、HEX・RGB・HSLが表示されます。それぞれの「コピー」でクリップボードにコピーできます。
4. キーボードの場合は画像にフォーカスし、矢印キーでカーソルを動かしてEnterキーで取得します。
5. 取得した色は「取得履歴」に最大20色まで残ります。画像の主な色は「主な色」に割合つきで表示されます。

対応形式と制限

• 対応形式：JPEG・PNG・WebP（1枚ずつ）。HEIC・GIF・BMPには対応していません。
• 長辺が4,096pxを超える画像や約1,600万画素を超える画像は、縮小したコピーから色を取得します。細かな模様や境界では元画像の色と少し異なることがあります。
• ブラウザが画像を表示用の色空間（sRGB）に変換した後の値を表示します。色プロファイル付きの画像や、ディスプレイの設定によっては、画像編集ソフトの値と数値がずれることがあります。
• 半透明のピクセルは不透明度（アルファ）も含めて表示します。HEXは8桁（末尾2桁が不透明度）になり、ブラウザの内部処理の都合で色の値が±1程度ずれる場合があります。
• 主な色は、画像を最大160pxに縮小したうえで似た色をまとめた近似値です。画像内に同じ値のピクセルがあるとは限りません。
• 取得履歴はページを閉じたり再読み込みしたりすると消えます（保存はしません）。

計算・変換の仕組み

画像を作業用のキャンバスに描画し、クリックした位置を画面上の表示サイズからキャンバスのピクセル座標に換算して、そのピクセルのRGBA値を読み取ります。表示倍率を変えても同じピクセルを指します。

HSLはRGBから計算し、整数に四捨五入しています。

主な色は、半透明以下の部分（不透明度50%未満）を除いたピクセルを、k-means法で8つのグループに分けて求めます。初期値は出現数の多い色から決めるため、同じ画像なら毎回同じ結果になります。割合は各グループに入ったピクセルの比率です。