画像の色抽出とカラーコード取得
画像カラーピッカーは、写真やイラストの任意の場所から正確な色を抽出して、HEXやRGB、HSLなどのカラーコードを表示するツールです。画像を外部に送信せずブラウザ内で処理するため、プライバシーを保ちながら安全に使用できます。
画像から色を抽出する手順
写真の特定の位置からカラーコードを取得する手順は以下の通りです。
- 写真エリアをタップして画像を選択するか、カメラを使用をタップして写真を撮影します。パソコンの場合はファイルをドロップすることもできます。
- 画像上をプレスしてドラッグすると、指やカーソルの上に拡大ルーペが表示されます。中心のスポイトの先を目的のピクセルに合わせます。
- 指を離すと色が確定し、画像の下にHEX、RGB、HSLの値が表示されます。各項目をタップするとクリップボードにコピーされます。キーボードの矢印キーで1ピクセル単位（Shiftキー併用で10ピクセル単位）の微調整も可能です。
対応ファイル形式と画像の縮小処理
JPG、PNG、WebPフォーマットの画像はブラウザで直接読み込めます。iPhoneのHEIC写真やカメラのRAWファイルも端末内で自動変換して読み込みます。
大容量の画像を選択した場合は、スマートフォンのメモリ不足を防ぐために自動的にわずかに縮小処理が行われます。
画像のRGBを調べる・色ブレを防ぐ平均化機能
生地や肌、葉っぱなど、ざらつきのある画像では、単一ピクセルを選ぶとノイズによって狙った色と少しズレることがあります。
歯車アイコンの設定からサンプル領域を「1ピクセル」「3x3平均」「5x5平均」に切り替えることで、周囲のピクセルを平均化した安定した色を取得できます。
補色や類似色のパレット取得と色名の特定
色を選択すると、色相環を基準とした3種類のカラーパレットが自動生成されます。色相を180度回転させた補色（2色）、±30度の類似色（3色）、120度および240度のTriadic（3色）を表示します。
また、CIELAB Delta Eの計算を用いて、選択した色に最も近い標準的な色名が表示されます。
iPhoneで写真の色抽出を行う方法
iPhoneやスマートフォンでもパソコンと同じ操作感で利用できます。画面上の写真エリアをタップしてライブラリから選択するか、カメラを使用をタップしてその場で撮影した写真を利用できます。
ドラッグ時には拡大ルーペが指の少し上に表示されるため、指で隠れることなく目的の場所を正確に狙えます。
画像の色抽出をエクセルやデザイン制作で活用する
抽出したHEXコードやRGB値は、タップするだけでコピーできます。エクセルでの資料作成や各種イラスト・デザインツールにそのまま貼り付けて利用できます。
画像データは外部サーバーに送信されず、完全にブラウザ内で処理されるため、社内資料やプライベートな写真でも安心して作業を行えます。
よくある質問
画像から色を抽出するにはどうすればいいですか？
画像を選択し、写真の上をドラッグして抽出したい色に拡大ルーペを合わせます。指やカーソルを離すと色が確定し、画像の下にHEXやRGBなどのカラーコードが表示されます。項目をタップするだけでコードをコピーできます。
写真の色抽出はiPhoneでも利用できますか？
はい、iPhoneや各種スマートフォンのブラウザで利用できます。ライブラリからの選択に加えて、カメラで撮影した写真やHEIC形式の写真もそのまま読み込んで色を抽出できます。
画像のRGBを調べる方法を教えてください。
色を確定すると、結果一覧の「RGB」の行に rgb(255, 136, 0) のような形式で表示されます。その行をタップするとRGB値がクリップボードにコピーされます。
アップロードした写真データがサーバーに送信される心配はありませんか？
写真はすべてお使いのブラウザ内だけで処理され、外部サーバーへ送信されることは一切ありません。会員登録も不要で、ページを閉じればデータは残りません。
服や肌などの写真で色を綺麗に拾うコツは？
歯車アイコンの設定からサンプル領域を「3x3平均」または「5x5平均」に変更してください。周囲のピクセルと平均化されるため、ノイズや生地の網目による色ブレを抑えて安定した色を取得できます。
抽出した色に合う補色を調べることはできますか？
色を確定すると、結果の下部に補色（180度）、類似色（±30度）、Triadic（120度・240度）のカラーパレットが表示されます。各パレットの色をタップするとHEXコードがコピーされます。
画像の色コード取得で微調整をするにはどうすればいいですか？
パソコンではキーボードの矢印キーを押すことで1ピクセルずつ移動できます。Shiftキーを押しながら矢印キーを押すと、10ピクセル単位で大きく移動して微調整できます。
おすすめ
-
日本色研 新配色カード199a選んだ色に合う配色を、実物のカードで探せます。
-
配色アイデア手帖 第2版拾った色から、センスのいい配色を組み立てられます。
-
Wacom Intuos Small ワイヤレス拾った色をそのまま、ペンで絵や描画に使えます。
無料でツールを続ける支えになります。✨
画像はイメージです。 Amazonのアソシエイトとして、Capsule Toolsは適格販売により収入を得ています。
