画像から色を拾う・代表色パレット

使い方と仕様

画像を入れて、色を知りたい所をクリックします。クリックした画素（1ドット）の色が、HEX（#ff600d）・RGB・HSL で出ます。それぞれコピーできます。拾った色は下に履歴として並び、クリックで選び直せます。画像は表示のために縮めて見せますが、色は縮めた絵ではなく、元の画像の、クリックした位置の1画素から読みます。

代表色のパレットは、次の手順で決めています。(1) 各画素の R・G・B を上位4ビット（16段階）に落とし、4096個の箱に分けて数える。(2) 画素の多い箱から順に見て、すでに選んだ色と RGB の距離が40以上離れていれば代表色にする（最大で指定した色数）。(3) すべての箱を、いちばん近い代表色に振り分けて画素数を足す。割合は、その合計 ÷ 数えた画素数です。代表色そのものは、選んだ箱の画素の平均なので、単色の画像なら、その色が正確に出ます。乱数は使わないので、同じ画像なら、いつも同じ結果になります。

画像が約200万画素を超えるときは、縦横を同じ間隔で抜き取って数えます（画面に、何画素おきかを表示します）。それ以下なら、全画素を数えます。扱えるのは5000万画素までで、超えるときは理由を表示して止めます。

色は、ブラウザの canvas が返す sRGB の値です。色の情報（ICCプロファイル）を持つ画像は、ブラウザが sRGB に直した後の値になるので、デザインツールで表示される値と、少しずれることがあります。透明・半透明の画素は、透明度も一緒に表示します。完全に透明な画素の色は意味を持たないので「透明」と表示します。パレットは、透明度が50%未満の画素を数えません。HSL は、整数に丸めて表示します（丸めた値から計算し直すと、元の色と1ずれることがあります。元の色は HEX / RGB です）。