画像カラー取得
画像をクリック・タップするだけで、 その場所のHEX・RGBカラーを取得。 最近選んだ色や画像の主要カラーも確認できます。
画像を選ぶ
色を取りたい場所を選ぶ
PCでは画像をクリック、 スマートフォンではタップしてください。 選択した位置の色を下に表示します。
色を確認する
取得した色を見る
最近取得した色
この画像の主要カラー
画像全体を簡易解析し、 よく使われている色を最大6色まで抽出します。
画像カラー取得の使い方
- 色を調べたい画像を選択します。
- 画像上の調べたい場所をクリックまたはタップします。
- 選択した位置のHEX・RGBカラーを確認します。
- 必要な値をコピーボタンでコピーします。
HEXとRGBとは
HEXは「#2563EB」のように、 Webサイトやデザインツールでよく使われる色の表記方法です。
RGBは赤・緑・青の強さを 「rgb(37, 99, 235)」のように数値で表します。
主要カラーについて
画像全体を縮小して色をグループ化し、 使用頻度の高い色を簡易的に抽出しています。
写真のように色数が多い画像では、 実際のデザイン上の「テーマカラー」と完全に一致するとは限りません。
よくある質問
スマートフォンでも色を取得できますか？
はい。 画像の調べたい場所を指でタップすると、 その位置の色を取得できます。
HEXとRGBはどちらを使えばよいですか？
Webサイトやデザインツールへ色コードを入力する場合はHEX、色の明るさを数値で扱う場面ではRGBがよく使われます。 必要な形式をコピーボタンで取得できます。
同じ画像から何色も取得できますか？
はい。 画像を繰り返しクリック・タップすると、 最近取得した色として最大12色まで表示します。
画像の色は完全に正確ですか？
ブラウザが読み込んだ画像のピクセル値を取得しています。 ディスプレイ設定やカラープロファイルによって、 見た目と数値に差を感じる場合があります。
画像はサーバーへ送信されますか？
いいえ。 画像の表示・色取得・主要カラー解析は、 お使いのブラウザ内で処理されます。
色を取得するときの見方
Color Pickerは画像内の一点のピクセル値をHEXとRGBで確認するツールです。Webデザイン、バナー、UI、 ブランドカラーの確認などで、画像から近い色を調べたいときに役立ちます。最近取得した色は最大12色まで残せるため、 複数箇所を比べながら選べます。
主要カラーは画像全体を縮小して色をまとめた簡易的な結果です。写真のように色数が多い画像では、 一点をクリックして得た色と主要カラーが一致しないことがあります。目的の場所を直接クリックして確認してください。
文字やロゴの輪郭には、背景となめらかにつなぐための中間色が含まれることがあります。 ブランドカラーの候補を確認したいときは、輪郭ぎりぎりではなく色面の中央を選びます。JPEG画像では圧縮や写真のノイズにより、 近い場所でも値が少し異なる場合があるため、必要なら複数箇所を確認してください。
表示環境と関連ツール
このツールはブラウザが読み込んだ画像のピクセル値を取得します。ディスプレイ設定、明るさ、カラープロファイルによって、 画面で見える印象と数値が異なる場合があります。取得値は制作の出発点として使い、実際の掲載先でも見え方を確認してください。
Color Pickerは色の確認、Infoは形式・寸法・容量の確認、 Convertは形式変更を担います。画像の色を調べてから、用途に合わせた形式やサイズを整える流れに使えます。
関連する画像ツール
既知色と形式変換後の見方
透明・半透明と既知RGBAを含むfixtureで、PNG・JPEG・WebPの同一座標を確認しました。形式変換後は同じ座標の色値が完全一致するとは限らず、JPEGでは透明情報も維持されません。