写真から配色を抽出
写真の主要色を抽出
4～10色を端末内で抽出し、HEXをコピーして透かしなしのカラーカードを保存。
画像は端末内でサンプリングし送信しません。配色は量子化による近似で、唯一の正解ではありません
端末内の画像
写真を使えるカラースウォッチに
サンプル画像を読み込みました。そのまま抽出するか、自分の写真に替えられます。
コピーできるスウォッチ
この画像の色の指紋
カラーカードを書き出す元画像とスウォッチを1200 × 630の共有カードに配置します。
方法と制限
色を量子化し、似すぎたスウォッチの並びを防ぐ
画像を小さなグリッドに縮め、近いRGBを同じバケットにまとめ、出現頻度で並べます。近すぎる候補を除き、区別しやすい配色にします。
主要色はトリミング、光、サンプル精度で変わります。全ピクセルの可逆統計ではなく、デザインに使える代表色です。
RGB量子化幅は24。候補のユークリッド距離を約54より大きくし、頻度、色相、相対輝度で並べます。
よくある質問
写真の主要色を抽出 · よくある質問
好きな色が先頭でないのはなぜ？
ピクセル頻度で並ぶため、大きな背景が先になりがちです。色数を増やすか色相順でアクセントを探せます。
透明PNGはどう扱いますか？
透明度の高いピクセルは除外し、半透明はブラウザがデコードしたRGBを使います。
画像はアップロードされますか？
されません。読み込み、縮小、クラスタリング、出力はブラウザ内で行います。