k-means クラスタリングによるカラー抽出の仕組み
画像から代表色を抽出する技術には複数の手法がありますが、k-meansクラスタリングは品質と速度のバランスに優れた定番アルゴリズムです。ピクセルの色空間をk個のクラスタに分割して重心色を求めることで、画像全体の「雰囲気」を代表するN色のパレットを生成できます。
k-means アルゴリズムの流れ
k-means は①k個の初期中心をランダムに決定→②全ピクセルを最も近い中心に割り当て→③各クラスタの平均座標に中心を更新→④②〜③を収束するまで繰り返す、という手順で動作します。色空間（RGB）の3次元座標で距離計算を行い、クラスタ数kが抽出色数に対応します。Image Color Extractorでは画像をサムネイルサイズにリサイズしてから計算するため、ブラウザ上でも高速に動作します。
抽出色数の選び方
色数が少なすぎると（3〜4色）画像の雰囲気を大まかに把握するのに向いています。多め（8〜12色）にすると微妙な色の違いまでパレットに収まります。写真より少ない色数、イラストや図版なら多め、という使い分けが一般的です。抽出後に色数スライダーで即座に再計算できるので、用途に合わせて試してください。
HEX・RGB・HSL の使い分け
HEXは`#ff6b6b`のような記法でHTML・CSS・Figmaに直接貼り付けられます。RGBは`rgb(255, 107, 107)`形式でCSSやCanvasのスタイル設定に便利です。HSLは`hsl(0, 100%, 71%)`形式で人間が色を直感的に把握しやすく、彩度・明度を維持したまま色相だけ変えるデザイン作業に向いています。CSS変数にはHEXかHSLが多く使われます。
カラーパレットのデザイン活用
抽出したカラーパレットはウェブデザインの参考配色・ブランドカラーの分析・Figmaのスタイル登録などに活用できます。背景色の抽出なら頻度の高い色（上位1〜2色）を、アクセントカラーの確認なら頻度の低い鮮やかな色に注目するのが効果的です。デスクトップ版ではCSS変数形式でまとめてエクスポートできます。