画像カラーピッカー（スポイトツール） 画像対応
画像をアップロードしてクリックするだけで、その箇所のHEX・RGB・HSLカラーコードを取得できます。
入力したデータはサーバーに送りません。すべてブラウザ内で処理するので、APIキーや機密情報も安心して使えます。
▶このツールについて
手元の画像ファイルをアップロードし、クリックした箇所のカラーコード（HEX / RGB / HSL）を即座に取得できるブラウザ版スポイトツールです。取得した色はパレットとして保存でき、CSSやデザインツールにそのままコピペできます。
参考サイトのスクリーンショットや、クライアントから共有されたデザインカンプの画像から「この色、カラーコードいくつだろう？」と思ったことはありませんか？ Photoshop等のツールを起動せずとも、このページに画像をドロップしてクリックするだけで、その場所のHEX・RGB・HSL値がパッと分かります。気に入った色はパレットに最大10色まで保存でき、後から一覧でコピーも可能。画像はすべてブラウザ内で処理されるため、NDA下の資料でも安全に使えます。
ツール操作
画像をドラッグ＆ドロップ、クリックで選択、またはCtrl+Vでペースト
HEX #888888
RGB rgb(136,136,136)
HSL hsl(0,0%,53%)
パレット（最大10色）
使い方
- 画像をドラッグ＆ドロップまたはファイル選択でアップロードします
- 画像上の取得したい色の部分をクリックします
- HEX / RGB / HSL のカラーコードが表示されます。パレットに保存も可能
いつ使うか
参考サイトの配色を調べたい時、デザインカンプから色を拾いたい時、写真から配色インスピレーションを得たい時。
使用例
風景写真の空の色 → #87CEEB、ロゴの赤色 → #E53E3E。パレットに保存して一覧コピー。
補足・Tips
- 画像を拡大表示すると、より正確にピクセル単位で色を取得できます。
- スクリーンショットを直接ペーストして使うこともできます（Ctrl+V）。
- 取得した色を既存のcolor-converterやtailwind-colorツールに流用すると便利です。
よくある質問
画像からカラーコードを取得するには？
このツールに画像をアップロードし、取得したい色の部分をクリックするだけ。HEX・RGB・HSLが即座に表示されます。
スクリーンショットでも使える？
はい。スクリーンショットをファイルとしてアップロードするか、Ctrl+Vで直接ペーストして使えます。
パレットに保存した色は？
ブラウザのローカルストレージに最大10色まで保存されます。ページを閉じても残ります。
画像データは安全？
はい。画像はブラウザ内のCanvas APIで処理されます。サーバーにアップロードされることは一切ありません。