画像をアップロードしてクリックするだけで色を取得。HEX・RGB・HSL 形式でコピーできます。
画像をドラッグ＆ドロップ
またはクリックして選択 | PNG・JPG・WebP 対応
使い方
- 上のエリアに画像をドラッグ＆ドロップするか、クリックしてファイルを選択します。
- 画像が表示されたら、色を取得したい場所をクリックします。
- クリックした場所の色が HEX・RGB・HSL の 3 形式で表示されます。
- 各行右端の「コピー」ボタンでその形式の値をクリップボードにコピーできます。
カラーコードについて
HEX（16進数）は #RRGGBB の形式で、赤・緑・青の各成分を 00〜FF の 16 進数 2 桁で表します。CSS や HTML で広く使われる最も一般的な形式です。
RGBは rgb(R, G, B) の形式で、赤・緑・青の各成分を 0〜255 の整数で表します。プログラミングや画像編集ソフトでよく使われます。
HSLは hsl(H, S%, L%) の形式で、色相（Hue）・彩度（Saturation）・明度（Lightness）で色を表します。人間の直感に近い指定方法で、CSS でも使用できます。
このツールでは、画像をアップロードしてクリックするだけで、任意のピクセルの色コードをHEX・RGB・HSLの3形式で即座に取得できます。写真の色、ロゴの色、スクリーンショットの特定の色など、目視では判断しにくい色も正確に数値で取得できます。すべての処理はブラウザ内で完結し、画像がサーバーに送信されることはないため、社外秘の資料や個人的な写真にも安心して利用できます。
パソコンで使う場合は、画像の上にマウスを乗せるだけでその位置の色が小さな四角で表示されます。クリックする前に狙った場所かどうかを確かめられるので、細かい部分の色を拾うときに役立ちます。取得しているのは表示中の見た目ではなく、元画像のそのピクセルです。画面上で縮小表示されていても、元の解像度の位置に換算して色を読み取るため、拡大表示のぼやけに影響されません。
正確に色を拾うには、避けたほうがよい場所があります。まず図形や文字の輪郭です。境界はなめらかに見せるために背景と混ざった中間色になっているため、少し内側の面をクリックしてください。次にJPEG画像です。JPEGは圧縮の過程で色がわずかに変化するため、一様に見える面でもピクセルごとに数値が異なります。ブランドカラーのように正確さが要る場面では数か所をクリックして値が揃うか確かめるか、圧縮のないPNG画像を使ってください。
よくある質問
Q. どんな画像形式に対応していますか？
A. JPEG・PNG・GIF・WebPなど、ブラウザで表示できる一般的な画像形式に対応しています。
Q. 取得した色はどの形式で表示されますか？
A. HEX・RGB・HSLの3形式で表示されます。各形式の右にあるコピーボタンでクリップボードにコピーできます。
Q. 画像がサーバーに送信されることはありますか？
A. ありません。画像の読み込みと色の取得はすべてブラウザ内で処理されます。プライベートな画像も安心してご利用いただけます。
Q. どうやって色を取得しますか？
A. 画像をアップロードした後、画像上の任意の場所をクリック（またはタップ）すると、その位置のピクセルの色をHEX・RGB・HSLで表示します。
Q. スマートフォンでも使えますか？
A. はい。スマートフォン・タブレット・PCのブラウザで利用できます。カメラロールの画像を読み込んで色を取得することも可能です。ただしマウスを乗せたときのプレビュー表示はパソコンのみの機能なので、スマートフォンでは目的の位置を直接タップしてください。細かい部分を狙うときは、画面を拡大してからタップすると外しにくくなります。
Q. クリックした場所以外の色も取れますか？
A. 画像上の任意の場所をクリック（またはタップ）すれば、その位置のピクセルの色を何度でも取得できます。クリックするたびに表示が更新され、前の色は残らないため、複数の色を控えたい場合はその都度コピーしてから次をクリックしてください。
Q. 色コードをコピーするには？
A. 取得した色はHEX・RGB・HSLの3形式で表示され、それぞれ横のコピーボタンを押すとクリップボードにコピーできます。CSSやデザインツールに直接貼り付けて使えます。
Q. 画像をドラッグ＆ドロップで読み込めますか？
A. はい。エリアをクリックしてファイルを選ぶほか、画像ファイルをそのままドラッグ＆ドロップして読み込めます。画像のURLを入力して読み込む方法には対応していないため、Web上の画像を調べたい場合はいったん保存するか、画面のスクリーンショットを撮って読み込んでください。
Q. 同じ色に見える場所なのに数値が違います
A. JPEG画像でよく起こります。JPEGは圧縮の際に色をわずかに変化させるため、一様に見える面でもピクセルごとに数値が異なります。正確な値が必要な場合は、圧縮のないPNG画像を使うか、数か所をクリックして値が揃う場所を選んでください。
Q. 文字やロゴの縁をクリックすると変な色になります
A. 輪郭は、ギザギザを目立たせないために背景と混ぜた中間色で描かれています。そのため縁をクリックすると、本来の色でも背景色でもない色が取れます。輪郭から少し内側の、面になっている部分をクリックしてください。細い線や小さな文字は全体が中間色になっていることもあるため、その場合は同じ色が使われている広い場所を探すのが確実です。
Q. 透明なPNGの背景をクリックすると黒になります
A. 透明部分には色の情報がなく、読み取ると黒（#000000）として返るためです。このツールは透明度を扱わないため、透明な領域の色は取得できません。色が付いている部分をクリックしてください。
Q. アニメーションGIFも読み込めますか？
A. 読み込めますが、色を取得できるのは最初のコマだけです。途中のコマの色を調べたい場合は、その場面のスクリーンショットを撮って読み込んでください。
活用シーン
Webサイトのブランドカラー抽出
ロゴや参考サイトのスクリーンショットから正確な色コードを取得したいとき。目視では分からない細かい色の違いも数値で確認できます。
デザインの配色参考
気に入った写真や画像の色合いをデザインに取り入れたいとき。クリックするだけでHEX・RGB・HSLの形式で色が取得できます。
印刷物・資料の色合わせ
手元の画像素材と同じ色をCSSやデザインデータで再現したいとき。目分量ではなく数値で正確に色を合わせられます。
商品画像の色分類・タグ付け
ECサイトの商品写真から正確な色コードを取得して、色フィルターやタグに活用したいとき。目視判定よりも一貫性のある色管理ができます。
SNSのアイコン・サムネイルの配色確認
参考にしたいSNSのプロフィール画像やバナーから使われている色を分析したいとき。ブランドカラーを調べてデザインの参考にできます。
デザインデータのない資料からの色再現
元データが手元になく、PDFや画像しか残っていない資料の色を再現したいとき。画面をスクリーンショットして読み込めば、使われている色を数値で拾えます。過去の制作物を作り直す場面で役立ちます。
スクリーンショットからのUI色調査
アプリやサイトの画面から、実際に使われている色を調べたいとき。開発者ツールが使えない画面や、他社アプリの配色を参考にしたいときの手段になります。