🎯 カラーピッカー

画像から色を取得 — クリックでパレットに保存

✓ ずっと無料 · ✓ 登録不要 · ✓ アップロード不要 · ✓ オフライン対応

🔒 画像がデバイスの外に出ることはありません。 すべての処理はCanvas getImageDataによるピクセル読み取りを使用してブラウザ内でローカルに行われます。アップロード、サーバー、追跡は一切ありません。

特長

ピクセル単位の精度 — 画像にカーソルを合わせると、ルーペが今いるピクセルとその周囲を表示します。クリックで保存、矢印ボタンで1ピクセルずつ動かせます。
複数フォーマット対応 — HEX・RGB・HSLで色を取得し、それぞれにコピーボタンがあります。CSS、デザインツール、コードにそのまま使えます。半透明のピクセルはアルファ付き（#rrggbbaa、rgba）です。
パレットに保存 — 最大12色のパレットを作成できます。個別の色またはパレット全体をコピーできます。
あらゆる画像から — 写真、スクリーンショット、デザインなど、あらゆる画像ソースから色を抽出できます。

仕組み

画像をアップロード — 色を抽出したい画像をドロップします。
ホバーして取得 — 画像の上でマウスを動かす（スマホではタップ）と、ルーペにピクセルが表示されます。クリックでパレットに保存し、矢印で位置を微調整します。
コピーして使用 — ボタンでHEX・RGB・HSLをコピー、保存した色をクリックしてHEXをコピー、または「すべてコピー」でパレット全体を取得します。

活用例

ロゴやWebサイトのスクリーンショットからブランドカラーを抽出
デザイン内の要素の正確な色を特定
CSSスタイルシート用のHEX/RGB値を取得
写真からインスピレーションのカラーパレットを作成

よくある質問

色の精度はどのくらいですか？

指しているピクセルそのものです。画像がどのサイズで表示されていても位置は画像本来のピクセルに換算され、ルーペがそのピクセルを枠で囲んで周囲と一緒に表示します。値はブラウザがファイルからデコードしたsRGBの値です。広色域（Display P3）の写真はまずsRGBに変換され、強く圧縮されたJPGは元のデザインとわずかに異なっている場合があります。

RGBやHSL形式でコピーできますか？

はい。パネルには表示中の色のHEX・RGB・HSLそれぞれにコピーボタンがあります。保存した色をクリックするとHEXがコピーされ、3つの値が再び表示されます。

スマホでも使えますか？

はい。画像をタップすると色を取得します。指先は数十ピクセルを覆うので、矢印ボタンで1ピクセルずつ位置を動かせます。ルーペと画像上のリングが現在地を示します。

透明なピクセルはどうなりますか？

半透明のピクセルはアルファ付き（#rrggbbaa、rgba()、hsla()）で表示されます。完全に透明なピクセルには色がないため保存できません。