画像カラーパレット抽出 - HEX、RGB、HSLを取得

カラーパレット抽出ツールの機能

このツールは「この画像を少数の色で表現するならどれか」という問いに正確に答えます。ブラウザ上で画像をデコードし、長辺が約200ピクセルになるよう縮小した後、Canvasから生のピクセルデータを読み取ります。ダウンスケールは精度を犠牲にする手抜きではなく、縮小時に隣接ピクセルを平均化することで、JPEGのリンギングノイズやセンサーノイズ（本来ならほぼ同じ黒が大量に抽出される原因）を除去し、ピクセル総数を約4万に抑え、スマートフォンでも瞬時に処理を完了させます。アルファ値128未満のピクセルは、他の処理に先立ちすべて破棄されます。この一手順により、透明背景のロゴで主要色が黒と判定される事態を防ぎます。これは他の抽出ツールが最もよく犯す誤りです。残った不透明ピクセルはMedian Cut法でグループ化されます。Median Cutは、ピクセルを3次元のRGB空間内の点群とみなし、それらを囲む箱を、色の広がりが最も大きく、かつ含まれるピクセル数が多い箱から順に、実際に色の値が変化する位置で二分割することを繰り返します。この処理を指定した色数に達するまで続けることで、画像の実際の構造に従ったクラスタが得られ、各クラスタは恣意的なバケットの中心ではなく、内部ピクセルの平均色を報告します。これが、固定グリッド方式で生じるくすんだ灰色ではなく、画像に実在する色が結果として得られる理由です。その後、並び順が調整されます。単純なピクセル数だけでのランク付けは問題を孕みます。写真では空や白いスタジオ背景が面積の40%を占めることも多く、純粋なカウントではそうした色が先頭に立ち、本当に求めている色が埋もれてしまうのです。そのため、ほぼ無彩色、ほぼ黒、ほぼ白に近いクラスタはソート時の重みを下げています。ただし、これらが除外されることはなく、各スウォッチの横に表示されるパーセンテージは、常に重み付けなしの真のピクセル占有率です。最後に、各スウォッチはWCAG 2.1の相対輝度に基づき、その特定の色に対してコントラスト比がより高い黒または白をテキスト色として取得します。このテストではHSLの「明度」ではなく「輝度」を用いるため、単純な明度閾値では誤判定される中間調でも正しい結果が得られます。