カラーピッカーに自動パレット抽出機能を追加した理由

私たちのカラーピッカーは、これまでも画像をアップロードして任意のピクセルをクリックすれば、正確なHEX、RGB、HSL値を取得できました。これは「この特定の点は何色か」という問いには答えますが、実際に画像をアップロードする人の多くが本当に知りたいこととは違います。多くの場合、知りたいのは「この画像全体の配色は何か」——ロゴからブランドカラーを抽出したい、あるいは参考写真の雰囲気をウェブサイトの配色に合わせたい、といった用途です。

1ピクセルのサンプリングではそれに答えられません。そこでパレット抽出機能を追加しました。画像をアップロードすると、ツールが自動的に最も支配的な8色を抽出し、クリック可能なスウォッチとして表示します。

仕組み

AIモデルは一切使わず、どこにもアップロードもしません——数ミリ秒で完了するシンプルな頻度カウントアルゴリズムです。

画像を80×80のキャンバスにダウンサンプリングします。色の統計にフル解像度は不要で、ダウンサンプリングによって大きな写真でも瞬時に処理できます。
各ピクセルは色を粗く丸めたバージョンでバケットに分類されます——RGB各チャンネルの上位5ビットを使うことで、視覚的にほぼ同じピクセルが個別の色としてカウントされず、同じバケットに入ります。
バケットをピクセル数の多い順に並べ、上位8個をパレットとし、各バケット内の全ピクセルの平均色として表示します。

以上です。機械学習も外部サービスも使わず、ダウンサンプリングとカウントだけ——だから瞬時に処理でき、ブラウザの外に出ることもありません。

スウォッチをクリックしてコードを取得

各パレットスウォッチはクリック可能です。クリックするとツールのアクティブカラーになり、HEX、RGB、HSLが自動的に入力され、同時にhex値がクリップボードにコピーされます。パレット全体をカンマ区切りのリストとしてコピーしたい場合は「すべてコピー」ボタンも用意されており、デザインツールやCSSカスタムプロパティのブロックに直接貼り付けるのに便利です。

試してみる

カラーピッカーのページでスクリーンショット、ロゴ、写真など任意の画像をアップロードすると、下にパレットが自動的に表示されます。