$ tools/image-color-picker

画像カラーピッカー

画像をドロップして正確な色を選択 — hex、RGB、HSL、CMYK。またはドミナントカラーパレットを自動抽出。クリックでコピー、ブラウザで動作。

ここに画像をドロップ
PNG, JPG, WebP または GIF — またはクリップボードから貼り付け(⌘/Ctrl+V)
100%ローカル · 何もアップロードされない
#000000
画像の上を移動…

$ 自動パレット

画像を読み込んでから、主要な色を抽出してください。

# 選択した色

画像の任意の場所をクリックして色を選択してください。
HEXcopy
RGBcopy
HSLcopy
CMYKcopy

$ 保存されたパレット

選択された色がここに集まります。スウォッチをクリックしてHEXをコピーしてください。

$ 画像から色を選ぶ方法

  1. 上のボックスに画像をドロップするか、ファイルを選択するか、クリップボードから直接貼り付けてください。すべてはブラウザでローカルに行われます — 画像はどこにもアップロードされません。
  2. 画像の上にカーソルを移動してください。拡大鏡がピクセルレベルのズームとライブHEXコードを表示し、必要な正確な場所に着地できるようにします。
  3. クリックして選択。色は右側にHex、RGB、HSL、CMYKとして表示されます。任意の値をクリックして即座にコピー。
  4. クリックを続けてパレットを構築してください。保存された色は下に集まります — 一度にすべてをコピーするか、1クリックで単一のHEXを取得します。

画像から直接色を引き出す理由?

アプリのストアリスティング、フィーチャーグラフィック、またはアイコンを設計しているとき、スクリーンショットは既に色のストーリーを持っています。実際のピクセル — ブランドのブルー、UIのアクセント、正確な背景のトーン — をサンプリングすることで、目で見るのではなく、すべてが一貫して保たれます。スクリーンショットのキャプション、背景、フレームを、製品に実際にある色に一致させてください。

Hex、RGB、HSL、CMYK — どれを使う?

HexとRGBは画面用です: アプリUI、ストアアセット、ウェブサイト。HSLは調整に最も使いやすい — 推測せずに明度や彩度を微調整できます。CMYKは、物理的なプロモカードのように何かが印刷される場合にのみ重要です。このツールは、すべてのピクセルに4つすべてを提供するため、手動で変換する必要はありません。

$ FAQ

画像はサーバーにアップロードされますか?

いいえ。ピッカーはキャンバスを使用してブラウザでピクセルを直接読み取ります。画像はデバイスを離れません。それも高速でプライベートになる理由です。

どの画像形式が機能しますか?

ブラウザがレンダリングできるもの — PNG、JPG、WebP、GIF、BMPなどほとんど。⌘/Ctrl+Vでクリップボードから画像を貼り付けることもできます。

複数の色を選べますか?

はい。クリックするたびに、下の保存されたパレットに色が追加されます。HEXコードのリスト全体を一度にコピーでき、デザインファイルにパレットを取り込むのに便利です。

選択された色はどれくらい正確ですか?

カーソルの下の正確なピクセルを読み取るので、ピクセルパーフェクトです。拡大鏡は、特に忙しいまたは詳細な画像で、正確な場所に着地するのに役立ちます。

モバイルでも動作しますか?

はい。ホバーする代わりに画像をタップして色を選択してください。選択された値とパレットは同じように動作します。

色を深く探求

気に入った色を選びました? カラーページで色合い、陰影、ハーモニー、コントラスト、意味を掘り下げてください。

LaunchShotsを気に入っていただけましたか?
永久無料 — 時間を節約できたなら、コーヒーをおごっていただけます。
応援する →
コピーしました ✓