Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
このツールは使いやすかったですか？
フィードバックは改善に役立ちます
精准提取图片像素，一键输出RGB与HEX色值。
概要
解決できる課題、処理の仕組み、データの範囲を確認できます。
画像色抽出ツールは、写真・スクリーンショット・デザイン画像などを読み込み、指定した場所の色をHEXまたはRGBで表示します。画像全体から代表色を自動検出する機能ではなく、知りたい箇所を自分で選ぶスポイト型の取色です。色見本を見ながら値を確認でき、クリックした色はパレットに追加されます。
HEXは赤・緑・青の3つの色成分を16進数で続けて書く形式です。たとえば #FF5733 は同じ色を rgb(255, 87, 51) とも表せます。RGBの各数値はそれぞれ赤・緑・青の強さを示し、HEXとRGBは画像から読んだ同じ画素を別の書式で表現します。W3CのCSS Color仕様でも両方の表記が定義されています。
画像上でポインターを動かすと、その位置の色がプレビューに表示されます。移動だけではパレットに保存されず、画像をクリックすると選んだ色が一覧に追加されます。一覧には最大30色まで保持でき、各色のHEXを個別にコピーするほか、HEXとRGBをまとめてコピーしてメモやスタイル案に貼り付けられます。
使い方
手順に沿って操作し、例を使って入力と結果を確認します。
PNG、JPG/JPEG、WebP、GIF、BMPまたはAVIF形式の画像を1枚選択するか、アップロード欄へドラッグします。画面に表示されるファイルサイズ上限は1 MBです。
画像上でポインターを動かし、色見本とHEX・RGBのプレビューを確認します。細い線や境界の色を探すときは、画像を見やすい表示サイズに調整してから位置を選ぶと確認しやすくなります。
残しておきたい画素の位置をクリックします。選んだ色はパレットの先頭に加わり、操作中に最大30色まで一覧へ蓄積されます。
色ごとのコピー操作でHEXを取得するか、「全てコピー」で一覧のHEXとRGBを行ごとにまとめてコピーします。不要な色は個別に削除でき、パレット全体も消去できます。
CSSなどへ短く記録したい場合はHEX、各色成分を読み比べたり説明したりする場合はRGBが便利です。たとえば赤255・緑87・青51なら #FF5733 と rgb(255, 87, 51) は同じチャンネル値を示します。コピーした後は、貼り付け先が期待する形式かを確認してください。
活用例
仕事や日常の流れの中での活用方法を紹介します。
Web制作や資料作成で参考画面のボタン・背景・枠線の色を調べたいとき、対象位置をクリックしてHEXまたはRGBを控えられます。文字の縁、影、半透明の重なりを避け、面の中央付近を選ぶと意図した色に近い画素を見つけやすくなります。
デザイン案を確認する担当者は、主色や強調色を順にクリックし、一覧をまとめてコピーしてレビュー記録に残せます。パレットには色の数値だけが入り、画像名や選択位置の説明は保存されないため、後で確認できるように出典や用途は別途メモします。
写真中の布や小物など、見た目の色をコードとして記録したいときにも使えます。画像内の選択点に対応する値を得られますが、商品やブランドが定めた正式な色規格を特定するものではありません。
Q&A
よくある疑問や迷いやすい点をまとめて確認できます。
いいえ。移動中はプレビューだけが変わります。パレットへ追加するには画像上をクリックしてください。
登録した各色についてHEXとRGBの組が1行ずつコピーされます。色ごとのコピー操作ではその色のHEXを取得できます。
この画面で確認・コピーできるのはHEXとRGBです。透明度、HSL、CMYKへの変換や画像全体の代表色抽出には対応していません。
取れるのは表示画像の選択画素の値です。圧縮、拡大縮小、アンチエイリアス、影や透明部分があると、元データの指定色と異なる値になることがあります。
注意
利用範囲、結果の制限、必要な注意点を事前に確認します。
色値は読み込んだ画像を現在のブラウザーで表示した際、クリックした位置から取得します。画像の圧縮や編集、縮小表示、境界の混色などがあると、取色結果は制作元が指定した色と一致しない場合があります。ブランドガイドや印刷用の色指定を確定する用途では、元のデザインデータや管理者が定めた値も確認してください。
画像は端末から選択してページ上で読み込まれ、取色そのものに画像ファイルを送信する処理はありません。ファイルが読み込めない場合は、対応形式で保存し直すか、サイズを小さくして再度お試しください。色の見え方はディスプレイや表示環境で異なることがあるため、画面上の印象よりコピーした数値を基準に照合してください。
関連
関連ツール、特集、利用可能なAPIを探せます。