画像からのカラーピッカー

ホバーしてプレビュー、クリックして色をロック

画像をアップロード

画像から色を選ぶ必要があるのはいつですか?

デザイナーは、元のスタイルガイドにアクセスせずにロゴからブランドカラーを一致させます。開発者は、テーマ生成のために写真から主要な色を抽出します。教師は、レッスンのためにアートワークから色を引き出します。スポイトは、カーソルの下にあるピクセルの正確なRGBを読み取り、HEX(`#RRGGBB`)およびHSLに変換します。

ブラウザの組み込みスポイト(Chromeの`EyeDropper API`)は、画面上でのみ機能し、アップロードされたファイルでは機能しません。このツールは、画像をキャンバスに読み込み、任意のピクセルをサンプリングできるようにすることで、そのギャップを埋めます。

一般的な使用例

  • 競合他社のウェブサイトのスクリーンショットからブランドカラーを一致させる。
  • グラフィックデザインプロジェクトのために写真からパレットを抽出する。
  • UIのスクリーンショットの正確な背景色を見つけて再現する。
  • ポートレートから肌の色調をサンプリングして、グレーディングやメイクの参考にする。

よくある質問

なぜ色が元のものと少し異なるのですか?

大きな画像はサンプリング前にフィットするようにスケーリングされます(最大800px)、したがって大きな画像では選択された値はリサンプリングされたプレビューから来ており、正確な元のピクセルからではありません。JPEGソースも圧縮のために色がわずかにシフトします。

透明なピクセルから選ぶことはできますか?

はい — ピッカーはRGBAを表示します。完全に透明なピクセルでも、基礎となるRGB値(通常は0,0,0またはキャンバスの背景)があります。

ピッカーはアニメーションGIFで機能しますか?

最初のフレームをサンプリングします。他のフレームについては、必要な瞬間をスクリーンショットでキャプチャし、そのスクリーンショットを読み込んでください。

HEXとRGBはどのように関連していますか?

HEX `#RRGGBB`は、10進数ではなく16進数で書かれたRGB `(R, G, B)`と同じ値です。`#FF0000`と`rgb(255, 0, 0)`はどちらも純粋な赤を意味します。

私の画像はアップロードされていますか?

いいえ — 画像はブラウザのキャンバスに読み込まれ、そこに留まります。ネットワーク呼び出しはありません。