作ったもの
Color From Image — https://sen.ltd/portfolio/color-from-image/
- ドラッグ & ドロップ / ファイル選択
- k-means クラスタリング (k=3〜8)
- k-means++ 初期化
- hex / RGB / HSL 表示 & コピー
- CSS 変数 / JSON / SCSS エクスポート
- 完全ローカル処理（アップロードなし）
vanilla JS、ゼロ依存、ビルド不要。node --test で 35 ケース。
k-means とは
各ピクセルを RGB 3 次元空間の点とみなし、k 個のクラスタ重心を見つける。重心 = ドミナントカラー。
k-means++ で初期値を分散
ランダム初期化だと複数の重心が同じクラスタに入る。k-means++ は「既存重心から遠いピクセルほど次の重心に選ばれやすい」確率的選択で、初期値を色空間全体に散らす。
5000 ピクセルサンプリング
100 万ピクセルの画像でも 5000 サンプルで十分。色分布は捉えられ、k-means はミリ秒で完了。
シリーズ
100+ 公開ポートフォリオ シリーズの #41 です。