Color Picker from Image

画像を開いてクリックするだけで HEX を取得。ズーム付きスポイト、RGB/HSL、パレット、履歴。Color picker from image、オフライン対応。

🎨 スクリーンショットやロゴ、写真をタブに直接ドロップして、そこから正確な色を取り出せます。読み取るのはあなたのファイルの実際のピクセル。サーバーへのアップロードなし、サインイン不要、インストール時の権限警告もありません。 この color picker from image の仕事はそれだけです。画像を開き、カーソルを合わせてクリックすれば、HEX がもうクリップボードに入っています。たった一つの値のために重いデザインスイートを立ち上げる必要も、クライアントのモックアップを素性の知れないウェブサイトに貼り付けて正しい答えを祈る必要もありません。 🚀 クイックスタート 1. ツールバーのアイコンをクリック — ピッカーが専用のタブで開き、作業スペースはたっぷり。 2. 画像をドラッグするか、Ctrl+V を押すか、ファイルを選択 — 一般的な画像形式はすべて開け、透過もそのまま扱えます。 3. カーソルを合わせてクリック — 画像から HEX コードを拾うこのカラーピッカーは、もう値をコピーし、画面上でそれを知らせています。 空の画面が最初に一度だけ使い方を説明します。あとは指が覚えます。 🔍 信頼できるズーム式スポイト ルーペはファイルのピクセルをネイティブ解像度のまま拡大します。だから取った色は、ビットマップに本当に存在する色。それこそが、画像から HEX を拾うカラーピッカーの本来の役目です。 ➤ カーソル周辺のピクセルグリッドと、常に見えている正確な座標 ➤ 矢印キーで十字線をちょうど 1px ずつ、Ctrl+矢印で 10px ずつ移動、Enter で色を確定 ➤ アンチエイリアスの縁にもうだまされない: 画像から RGB を読むカラーピッカーは、ぼやけた再描画ではなくソースそのものを読むべきです ➤ 透明な領域は黒のふりをせず、透明として正直に報告します 🎯 使うフォーマットをすべて話せる ▸ CSS や Figma のための HEX — ワンクリックで使える、画像対応の HTML カラーピッカー ▸ RGB と HSL を並べて表示し、それぞれ単独でコピー可能 — 16進カラーピッカーも同じパネルに同居 ▸ ピックと同時に自動コピーし、目に見える形で確認 — ここでの「クリップボードにコピーしました」は本当にコピーされています ▸ パネルは次のピックまで数値を表示し続けます。2秒で消えたりしません 🖼 パレットと、忘れない履歴 画像を開いた瞬間に、画像全体から主要な色調のパレットが作られます。「このロゴはどんな色でできているのか」とクライアントに聞かれたときに便利です。しかも各スウォッチはアートワークから実際に取り出した色。画像のどこにも存在しない平均色は決して混ざりません。ピックした色はすべて 50 スロットの履歴に入り、ブラウザを再起動しても残ります。 1️⃣ 一日中画像ファイルから色をピックしても、最新の 50 色はそのまま 2️⃣ 翌日ポップアップを開けば昨日のスウォッチがそこにあり、ワンクリックでコピー 3️⃣ プロジェクトが終わったらボタン一つで履歴をクリア 📸 いま見ているページを、画像として 表示中のサイトから色が欲しい? 「このページを画像として取り込む」(Grab this page as an image)なら、ポップアップのボタンひとつで表示中のタブをキャプチャし、そのスナップショットを同じピッカーで開きます — 同じルーペ、同じ履歴。あるいはページ上の画像を右クリックして「この画像から色を取得」("Pick color from this image")を選択。サーバーが許可していれば本物のピクセルを、許可していなければレンダリングされたスナップショットを、それすらブロックされている場合は分かりやすい言葉のヒントを返します。黙って失敗することは決してありません。 もう一つ、覚えておいて損のない小技があります。どこかのページで画像を右クリックして「画像をコピー」("Copy image")を選び、ピッカーに Ctrl+V。Chrome がフル解像度でデコード済みのビットマップを渡してくれます — 追加の権限を一切使わない、画像のカラーピッカーの完成です。 🔒 設計そのものがプライベート ▪ ホスト権限なし、インストール時の警告画面もなし — 閲覧内容を読み取ることはできず、選んだ色はローカルストレージだけに保存されます ▪ ネットワークリクエストはゼロ: アナリティクスなし、CDN フォントなし、どこにも何も送信しません — DevTools を開いて自分の目で確かめてください ▪ オープンソース: コードベース全体が公開され、すべての行が読めます ▪ オフラインでも、機内でも、社内プロキシの内側でも動きます スクリーンショットには、ダッシュボードや請求書、未発表のデザインが写り込みがちです。画像から色を拾うオンラインのサイトは、それらのアップロードを求めます。この拡張機能は何もアップロードできません。サーバーと通信するコードが存在しないからです。逆もまた同じ: オンラインのカラーピッカーは、あなたのファイルを運営者の望むだけ手元に置きます — ここでは、ファイルはタブの外に一歩も出ません。 ⚖️ 正直な守備範囲 — これは何ではないか これはページを検査するスポイトではありません。CSS 変数は読みませんし、ウェブサイトの DOM をクリックして回ることもありません。カラーホイールでも、グラデーションのおもちゃでもなく、中に Pantone の色見本帳も入っていません。ここにあるのは狭く、きちんと仕上げた職人仕事です: 画像・スクリーンショット・写真から、ピクセル精度で素早く色を拾うこと。 💬 1秒で身につく習慣 コピーして、貼り付けて、クリック — color pick from image の一連の流れはほんの数秒。それこそが狙いです:一つの仕事を正確にこなし、すっと脇に退く小さなツール。 🧭 ピン留めしているのはこんな人 ◦ 参考写真やスキャンしたブランドブックから色味を合わせるデザイナー ◦ 欲しい色の HEX をキーストローク2回分の距離に置いておきたいフロントエンド開発者 ◦ スクリーンショットから UI の状態をそのまま記録するサポートエンジニア ◦ キャンペーン前にパートナーのロゴからブランドカラーを抜き出すマーケター ◦ ムードボードのために色にラベルを付けるイラストレーターや学生 答えはすでに画像の中にあります。このツールはそれを取り出すだけ — 正確に、ローカルで、数秒で。