画像から色を取得する
ピクセルを選んで色の値を確認するか、提案された配色をデザインの出発点にします。必要なHEX・RGB・HSL形式をコピーできます。
画像上の一点を選ぶと、ブラウザが読み込んだ元サイズの画像を参照します。配色は縮小画像から得る目安であり、画像内の色を正確に数える機能ではありません。
静止画のJPG・PNG・WebPに対応。1枚10 MiB、1200万画素まで。画像はブラウザ内で処理します。
画像からカラーコードを取得する方法
- JPG・PNG・WebP画像を選択します。
- 画像上の位置を選ぶか、左上を0とするX・Yのピクセル座標を入力します。画像にフォーカスして矢印キーを押すと、選択位置を移動できます。
- HEX・RGB・HSLと不透明度を確認し、必要な形式をコピーします。
- 主要色を選ぶか、配色全体をコピーしてデザインの参考にすることもできます。
取得結果を確認するには、このサイトで作成した赤いサンプルPNGをダウンロードし、X＝64・Y＝64とX＝192・Y＝64の色を取得して、下の形式ごとの例と比べてください。
1ピクセルの色と主要色の違い
画像上の位置を選ぶと、ブラウザで読み込んだ元サイズのピクセルを取得します。主要色は縮小画像から色を抽出して近い色をまとめ、透明・半透明のピクセルを除外します。8色より少ない場合もあり、画像内の正確な色の割合ではありません。
半透明のピクセルは、不透明度を含むHEX・RGBA・HSLで表示されます。完全に透明なピクセルに見える色はなく、ブラウザから取得するRGB値が0になることがあります。
画像のカラープロファイル、ブラウザ、画面によって色の見え方が変わる場合があります。印刷用CMYK、実物の絵の具、校正済みの色の測定には対応していません。
画像とプライバシー
1枚10 MiB・1200万画素、一辺12,000ピクセルまでです。アニメーション画像・HEIC・PDFには対応していません。画像はブラウザ内で処理し、アップロードや自動保存はしません。クリアするかページを離れると、画像は残りません。
コピーにはブラウザのクリップボード許可が必要です。コピーできない場合は、カラーコードを選択して手動でコピーしてください。
先に画像を調整する場合は、画像の切り抜き・サイズ変更ツールを使えます。ファイル容量が大きい場合は、画像圧縮ツールをお試しください。
画像から色を選び、使う色値を確認する
ツールに戻る特定の1ピクセルは位置を選んで取得する
静止画を選び、色を調べたい位置をクリックします。X・Y座標を入力することもでき、画像の左上が0, 0です。位置で取得する色は、ブラウザで読み込んだ元サイズのピクセルを参照します。
操作説明にある赤いサンプルPNGを使い、X＝64・Y＝64とX＝192・Y＝64を選ぶと、元画像の2つのピクセルを比べられます。座標は0から始まり、配色の抽出に使う縮小画像ではなく元画像を基準にします。アンチエイリアスのかかった境界を選ぶと周囲の色が混ざるため、代表色を知りたい場合は均一な部分の内側を選んでください。
キーボードで操作する場合は画像にフォーカスし、矢印キーで選択位置を移動できます。同じ画像の座標を後から確認したり、寸法が同じ別画像の位置と比べたりする場合は、座標欄も記録してください。
用途に合わせてHEX・RGB・HSLを選ぶ
HEXは短い表記で、スタイルシートやデザインツールでよく使われます。RGBは赤・緑・青の各値、HSLは色相・彩度・明度を表し、色の性質を調整するときに扱いやすい場合があります。利用先のソフトや資料が受け付ける形式を選んでください。
半透明のピクセルでは不透明度も結果に含まれます。HEXにはアルファ値が付き、RGBはRGBA、HSLはアルファを含む形式で表示されます。完全に透明なピクセルには目に見える色がなく、ブラウザがRGBの値を0として返すことがあります。
必要な形式のコピー操作を使います。クリップボードへのアクセスはブラウザの許可に左右されます。コピーできない場合は、表示された文字を選択して手動でコピーしてください。
提案された配色は目安として使う
主要色は、長辺が最大256ピクセルの縮小画像から抽出します。近い色はグループ化され、透明・半透明のピクセルは除外されます。代表色は最大8色ですが、異なる色のグループが少なければ8色未満になります。
この配色は画像内のすべての色を列挙するものでも、各色が占める正確な割合を示すものでもありません。縮小時に小さな部分が見えなくなったり、近い色がまとめられたりすることがあります。特定のピクセルの値が必要なら、位置を選んで取得してください。
デザインの参考として配色をコピーした後は、元画像やデザインシステムと見比べて候補を確認します。ブランドカラーの出現頻度の測定や、色のアクセシビリティ検査には使えません。
値を利用する前に画面上の色も確認する
表示される値は、ブラウザが画像をデコードして読み取ったピクセル情報です。埋め込まれたカラープロファイル、ブラウザの色処理、ディスプレイ設定や表示環境によって、画面上の色の見え方が変わる場合があります。数値は校正済みの物理測定値ではありません。
印刷用CMYK、実物の絵の具の色、校正済みの色測定には対応していません。印刷や厳密な色合わせでは、その用途向けの手順を使い、受け取り側のアプリケーションのプロファイル設定も確認してください。
色を記録するときは、画像、座標、形式、不透明度を一緒に残すと、別の人も同じピクセルを探しやすくなり、透明度を含む値かどうかも分かります。
画像を手元で扱い、必要な値をコピーする
画像はブラウザ内で処理され、アップロードや自動保存はされません。現在の作業から画像を消すには、画像をクリアするかページを離れます。残したい値はページを閉じる前に記録してください。
静止画のJPG・PNG・WebPを1枚ずつ選択できます。入力は10 MiB、1200万画素、各辺12,000ピクセルまでです。アニメーション画像、HEIC、PDFには対応していません。
色コードをコピーできない場合は、ブラウザがクリップボードへのアクセスを許可しているか確認してください。文字を選択して手動でコピーする方法もあります。配色をファイルとしてダウンロードしたり、色の履歴を保存したりする機能はありません。
画像から色を取得するときの質問
配色が8色より少ないのはなぜですか？
小さな縮小画像から近い色をまとめ、透明・半透明のピクセルを除外するためです。抽出後に異なるグループが少ない場合は、表示される色も少なくなります。
別の画面では取得した色が違って見えるのはなぜですか？
コードはデコードしたピクセルのチャンネル値を表します。画面での見え方には画像プロファイル、ブラウザ、ディスプレイ設定も関わります。このツールはモニターを校正したり、実物の色と一致することを証明したりしません。
透明なピクセルの色も取得できますか？
取得できます。不透明度を含む値になりますが、完全に透明なピクセルには目に見える色がありません。ブラウザがRGB値を0として返すことがあります。主要色の抽出では透明・半透明のピクセルを除外します。
入力の制限
静止画のJPG・PNG・WebPを1枚選択できます。入力は10 MiB、1200万画素、各辺12,000ピクセルまでです。アニメーション画像、HEIC、PDFには対応していません。位置での取得はデコードした元サイズのピクセルを参照し、配色の抽出には長辺256ピクセル以下の縮小画像を使います。
更新日