使い方

画像を選択するか、ボックスにドロップします。
画像の上でポインターを動かすと、拡大鏡が周囲のピクセルを表示します。
クリックまたはタップで色を選択し、HEX、RGB、HSL としてコピーできます。
下にスクロールすると主要な色が表示されます。必要な数を選び、コピーするか CSS 変数としてダウンロードできます。

仕組み

画像はお使いのブラウザ内でキャンバスに描画され、ポインターの下にある正確なピクセルの色が読み取られます。拡大鏡には 11 × 11 ピクセルの領域が拡大表示され、選択中のピクセルが枠で示されます。一辺が 4096 ピクセルを超える画像は最初に縮小されるため、非常に大きな写真では選択した1ピクセルが元の複数ピクセルの平均になることがあります。

主要な色は k-means クラスタリングで求めます。まずピクセルを 32,768 個の小さな色バケットにまとめ、そのバケットを、それぞれに含まれるピクセル数で重み付けしながら、選択した色数に統合します。開始点は決定的に選ばれるため、同じ画像からは常に同じパレットが得られます。

色はブラウザが表示に使用する sRGB 空間で読み取られます。画像に広色域のカラープロファイルが埋め込まれている場合、写真編集ソフトの表示とは値がわずかに異なることがあります。対応ブラウザ（デスクトップ版 Chrome と Edge）では、「画面から選択」ボタンは内蔵の EyeDropper を使って画面上の任意の場所から色を取得します。

使用例

ブランドカラーを合わせる

ロゴのスクリーンショットをアップロードし、メインカラーをクリックして、#1a73e8 や rgb(26, 115, 232) を CSS にコピーします。

写真からパレットを作成

海辺の写真を6色に分割すると、砂・海・空のトーンが得られ、それぞれが画像に占める割合が大きい順に並びます。

色合いを確認する

拡大鏡でズームして、隣のアンチエイリアスされた端ではなく、細い線の正確なピクセルを選択します。

よくある質問

写真エディターと色がわずかに異なるのはなぜですか？

ブラウザは表示のために画像を sRGB に変換します。広色域プロファイル（Display P3、Adobe RGB）を持つ写真は、元のプロファイルを保持するエディターでは値がわずかに異なる場合があります。

「画面から選択」ボタンが表示されないのはなぜですか？

画面から選択するには EyeDropper API が必要ですが、対応ブラウザは現在デスクトップ版 Chrome と Edge のみです。アップロードした画像からの選択はすべてのブラウザで機能します。

主要な色はどのように選ばれますか？

全ピクセルを、各色の出現頻度で重み付けした k-means クラスタリングで選びます。小さくても鮮やかなディテールは近い色の大きなグループに統合されることがあります。色数を増やすと分離できます。

画像はアップロードされますか？

いいえ。画像はブラウザ内でこのページによってデコード・解析され、端末の外に送信されることはありません。

プライバシー

画像は完全にブラウザ内で処理されます。アップロードされず、選択した色が送信または保存されることもありません。