カラーパレット抽出ツール

用途

本ツールは画像を読み込み、数千ピクセルをサンプリングし、自前実装のメジアンカットアルゴリズムで 3〜10 個の主要色クラスタにまとめます。結果として得られる代表的な HEX 色は、デザインシステムのシード、ムードボードの土台、あるいは他社ロゴからブランドカラーをサッと抜き出すのに使えます。すべてブラウザ内で動き、画像はアップロードされません。

使うべきタイミング

• ブランドロゴから主要色を抽出して、合うテーマを作りたいとき。
• ヒーロー画像から Tailwind 設定や CSS カスタムプロパティをシードしたいとき。
• 写真やアート作品からムードボード用のパレットを組みたいとき。
• デザインのヒーロー画像とページのアクセントカラーが合っているかチェックしたいとき。

メジアンカットの仕組み

1. 画像をダウンサンプリングして扱いやすい画素数にする。
2. 画素群の最も長い軸（R/G/B レンジ）を見つける。
3. その軸でソートして、メジアンで分割。
4. 各半分に再帰的に適用し、指定したバケット数に達するまで続ける。
5. 各バケットの平均色を返す。

よくある注意点

• 透明領域はスキップされます。 アルファ < 50% のピクセルは集計に入りません。透過 PNG のロゴで便利。
• 支配色が 1 色の写真（青空の多い砂浜など）はその色の濃淡だけが並びがちです。多色化したいなら、もっとカラフルな領域にトリミングしてください。
• メジアンカットは速いですが、知覚的に最適とは限りません。 補色や類似色など色彩理論的に整った結果が欲しいなら最終的にデザイナーの手が必要です。アルゴリズムは「美しさ」ではなく「頻度」に基づきます。
• スライダはバケット数のカウントで、"重要な"色の数ではありません。 2 色ロゴから 10 個要求すれば 10 個出ますが、ほぼ重複です。