Windows 11で画面上の色や画像内の色を調べたいときは、カラーコードの種類と取得方法を理解すると作業が進めやすくなります。
Webサイトの配色を確認するとき、ExcelやPowerPointの図形に同じ色を設定したいとき、デザイン担当者から指定されたRGB値や16進数を入力したいときにも役立つ知識です。
Windows標準機能だけでは画面上の任意の場所を直接スポイトする操作が限られるため、ペイントやMicrosoft PowerToys、ブラウザーの開発者ツールなどを目的別に使い分けることがポイントになります。
カラーコードを調べる主な方法は、画面をPowerToysのカラーピッカーで取得する方法、画像をペイントで開いて色を確認する方法、Webページをブラウザーの開発者ツールで調べる方法です。
また、RGBと16進数の対応を知っておけば、確認した色をWeb制作、Office文書、画像編集ソフトへ迷わず転記できるようになります。
Windows 11で画面のカラーコードを調べる方法
それではまず、画面に表示されている任意の色を取得する方法について解説していきます。
画面全体から色を拾う用途では、Microsoft PowerToysに含まれるColor Pickerを利用すると、アプリの種類を問わずRGB値と16進数のカラーコードを確認できます。
PowerToysのColor Pickerによる画面上の色の取得
Windows 11のデスクトップ、設定画面、ブラウザー、Officeアプリなど、現在表示している画面上の色をそのまま調べるには、Microsoft PowerToysのColor Pickerが便利です。
Color Pickerは、画面に重なって表示された小さな色見本をクリックし、カーソル位置のピクセル色をRGBや16進数で読み取れる機能です。
たとえばWebサイトのボタン色、Windowsのアクセントカラー、資料に使われている見出し帯の背景色を再現したい場面で活用できます。
画面をスクリーンショットとして保存しなくても、表示中の色を直接取得できる点がColor Pickerの大きな特徴です。
PowerToysが未導入の場合は、Microsoft Storeを開き、検索欄にPowerToysと入力してMicrosoft PowerToysをインストールします。
インストール後にPowerToysを起動すると、左側の一覧にColor Pickerという項目が表示されます。
Color Pickerを選び、機能を有効にするスイッチがオンになっていることを確認しましょう。
初期設定では、Windowsキー、Shiftキー、Cキーを同時に押すことでカラーピッカーを起動できます。
ショートカットキーはほかのアプリと重なる場合があるため、PowerToysの設定画面で使いやすい組み合わせに変更しても構いません。
調べたい画面を開いた状態でショートカットキーを押すと、画面が少し暗くなり、マウスポインター周辺に拡大表示と色の情報が現れます。
この状態でカーソルを目的の場所へ移動し、クリックすると色が確定します。
確定後には編集画面が開き、16進数のHEX、RGB、HSVなど複数の表記を確認できます。
Webページ用の色として使うなら、通常は先頭にシャープ記号が付く6桁の16進数をコピーします。
Officeアプリの色設定や画像編集ソフトに入力する場合は、赤、緑、青の各数値であるRGBを控えると入力しやすいでしょう。
なお、半透明の要素や影の上にカーソルを置いた場合、取得されるのは画面に合成された後の見た目の色です。
元のCSSに書かれた色や、透明度を含む設定値を知りたい場合は、後述するブラウザーの開発者ツールで確認するほうが適しています。
【操作のポイント】取得前に画面の拡大縮小率を確認し、文字の縁やアイコンの境界ではなく、色が均一に表示されている中央部分をクリックすると誤差を減らせます。
カラーピッカーの履歴と形式変更による転記作業
Color Pickerで取得した色は、その場で一度確認するだけでなく、履歴として残しておくと複数の色を比較したいときに便利です。
たとえば資料の配色を整える作業では、メインカラー、補助カラー、背景色、罫線色を順番に取得し、後で一覧から選び直すことがあります。
PowerToysのColor Pickerでは、取得した色を編集画面の履歴から確認でき、必要な形式を選んでクリップボードへコピーできます。
同じ色でもRGB、16進数、HSVでは表示の仕方が異なるため、貼り付け先が求める形式を先に確認することが大切です。
RGBは赤、緑、青の光の強さをそれぞれ0から255までの整数で示す方式です。
一方で16進数は、RGBの各値を00からFFまでの16進数へ変換し、6桁で並べて表現します。
たとえばRGBが255、0、0なら赤を表し、16進数ではFF0000、Web表記では#FF0000となります。
履歴画面でコピーする際、Web制作に使うのにRGBをコピーしてしまう、あるいはOfficeのユーザー設定画面に#付きの値をそのまま入れようとする、といった行き違いが起こりがちです。
貼り付け先がHTMLやCSSなら#RRGGBB形式、Windowsの色設定やOfficeのRGB指定欄なら3つの数値というように判断しましょう。
また、カラーコードを記録するときは、コードだけでなく用途も一緒にメモしておくと、後から見返したときに色の役割を判断できます。
たとえば見出し背景、警告表示、通常リンク、ボタン枠線のように記録すると、似た青色や灰色を取り違えにくくなります。
画面の一部がグラデーションの場合は、中央、左端、右端でコードが変わることがあります。
単一のカラーコードで再現するのか、複数色によるグラデーション設定を再現するのかを、取得前に決めておくと作業のやり直しを防げます。
企業ロゴやサービスのブランドカラーを扱う場合は、画面から拾った値を正式な指定値とみなさず、可能なら公式のブランドガイドラインも確認してください。
【操作のポイント】履歴には似た色が並びやすいため、取得直後に色名と使う場所をメモし、必要ならRGB値とHEX値の両方を残しておきましょう。
画像ファイルからカラーコードを確認する方法
続いては、保存済みの画像から色を確認する方法を確認していきます。
PNG、JPG、スクリーンショットなどの画像内にある色は、Windows 11のペイントで開き、スポイトと色の編集画面を使うことでRGB値を調べられます。
ペイントのスポイトツールによる画像内の色の選択
メールで受け取ったバナー画像、フォルダーに保存してあるスクリーンショット、Webページを切り取った画像などから色を調べるなら、ペイントを使う方法が手軽です。
ペイントはWindows 11に標準で用意されている画像編集アプリであり、画像の一部分をスポイトで選択して前景色へ反映できます。
まず、エクスプローラーで対象の画像ファイルを右クリックし、プログラムから開くを選んでペイントを起動します。
画像をペイントで開いたら、上部リボンにあるスポイトのアイコンを選択します。
スポイトを選択した後、画像内の調べたい色の場所をクリックすると、そのピクセルの色が色1として設定されます。
文字や図形の輪郭付近にはアンチエイリアスによる中間色が含まれるため、できるだけ塗りつぶし部分の中央をクリックすることが重要です。
たとえば青いボタンの外側の縁を選ぶと、影や境界線の青が取得される場合があります。
ボタン本体の色を知りたいなら、文字からも縁からも離れた平らな部分をクリックしましょう。
JPEG形式の画像では、圧縮によって同じように見える場所でもピクセルごとに微妙な色差が生じることがあります。
この場合は一度だけ拾った値を絶対的な色と考えず、周辺の数か所をクリックして近い値かどうかを見ると安心です。
ロゴや図表を再利用する目的で色を確認するときは、画像の拡大表示を使って1ピクセル単位で位置を選べるようにするとよいでしょう。
ペイントで選んだ色は色1の表示へ反映されますが、この段階では数値のRGB値までは一覧で見えません。
次の操作で色の編集画面を開き、赤、緑、青の各数値を確認します。
なお、透明背景のPNGを開いた際、透明部分は実際の色ではなくアプリ上の背景として表示されることがあります。
透明度を含めた正確な色情報が必要なら、対応した画像編集ソフトやWeb向けの検証ツールで確認することも検討しましょう。
【操作のポイント】画像を拡大してからスポイトを使い、文字の縁、影、反射、半透明部分を避けてクリックすると、目的の基本色を取得しやすくなります。
色の編集画面に表示されるRGB値と近似色の扱い
スポイトで色を選択した後は、ペイントの色1をクリックし、色の編集を選択すると、RGB値を確認できる画面が開きます。
ここには赤、緑、青の入力欄があり、それぞれ0から255の範囲で数値が表示されます。
たとえば赤が34、緑が113、青が179なら、RGB表記はRGB 34,113,179です。
この3つの値は、Officeアプリでユーザー設定の色を作るときや、画像編集ソフトで同じ色を指定するときにそのまま利用できます。
ペイントの色の編集画面はRGBを確認する用途に向いていますが、16進数のカラーコードは直接表示されないため、必要に応じて変換する必要があります。
16進数への変換は、各RGB値を2桁の16進数に置き換え、赤、緑、青の順番でつなげる仕組みです。
34は16進数で22、113は71、179はB3なので、RGB 34,113,179は#2271B3と表せます。
数値変換に慣れていない場合は、PowerToysのColor Pickerで同じ画像を画面表示した状態から取得するか、信頼できる変換ツールを利用すると入力ミスを防げます。
ただし、変換ツールへ業務資料や個人情報を含む画像そのものをアップロードする必要があるサービスは避けるほうが安全です。
また、印刷物を撮影した写真から色を拾う場合は、照明、カメラの補正、モニター表示の違いにより、元の印刷色とRGB値が一致しないことがあります。
画面用の配色として近い色を作る目的なら問題ありませんが、印刷色を厳密に再現する用途ではCMYKやカラープロファイルも関係します。
色の編集画面で数値を変えると、選択中の色見本も変化します。
少し明るい色にしたい場合はRGBの各値を同程度に増やし、鮮やかさを下げたい場合は各値の差を小さくするという考え方が基本です。
【操作のポイント】画像がJPEGの場合は取得値がわずかに揺れるため、重要なブランドカラーは画像からの推測だけで決めず、正式なRGB値またはHEX値を確認しましょう。
RGBと16進数のカラーコード表の見方
続いては、RGBと16進数の対応関係、カラーコード表の読み方について確認していきます。
RGBは赤、緑、青の明るさを0から255で指定する加法混色の方式です。
16進数のカラーコードはRGBの値を00からFFで表し、RRGGBBの順で6桁に並べます。
RGB値の仕組みと数値が示す明るさ
RGBはRed、Green、Blueの頭文字で、パソコンやスマートフォンなどの画面で色を作る基本的な方式です。
画面のピクセルは赤、緑、青の光を組み合わせており、それぞれの光量を数値で指定することで多くの色を表現できます。
各成分は0から255までの256段階で設定され、0はその色の光を使わない状態、255は最も強く光らせる状態です。
赤、緑、青がすべて0のRGB 0,0,0は黒になります。
赤、緑、青がすべて255のRGB 255,255,255は白です。
RGBでは3つの数値が同じなら無彩色になり、数値が小さいほど黒に近く、大きいほど白に近い灰色になります。
RGB 128,128,128は中程度の灰色であり、RGB 240,240,240は白に近い明るい灰色です。
一方、赤だけを255にし、緑と青を0にするとRGB 255,0,0となり、鮮やかな赤になります。
緑だけを255にするとRGB 0,255,0、青だけを255にするとRGB 0,0,255です。
赤と緑を強くして青を0にすると黄色系になり、赤と青を強くして緑を0にするとマゼンタ系になります。
このように各数値の大小を見ると、カラーコード表で示された色がどの方向の色味を持つのかを大まかに推測できます。
たとえばRGB 30,90,180は青の数値が最も大きいため青系です。
RGB 210,150,60は赤と緑が比較的高く青が低いため、黄土色やオレンジ系に近い色になります。
Officeの図形やセルの塗りつぶしでユーザー設定の色を指定する場合、RGB入力欄へこの3つの数値を入力します。
RGBの順番を誤ってBGRのように入力すると、同じ数字を使っていてもまったく違う色になるので注意が必要です。
画面の色はモニター設定、ナイトライト、HDR、アプリ側のカラーマネジメントにも影響されます。
数値が同じならデータ上は同じ色でも、別のディスプレイでは見え方に差が出る可能性があります。
【操作のポイント】RGB値は赤、緑、青の順に読み、最も大きい値と最も小さい値の差を見ると、色の傾向と鮮やかさを把握しやすくなります。
16進数表記とカラーコード表の対応関係
Web制作やHTML、CSSでは、色を16進数のカラーコードで指定することが一般的です。
16進数は0から9に加えてAからFも使う数え方で、Aは10、Bは11、Cは12、Dは13、Eは14、Fは15を表します。
カラーコードでは、赤、緑、青をそれぞれ2桁ずつの16進数で示します。
そのため、#RRGGBBという形の6桁表記になります。
たとえば#FFFFFFは、FFが10進数の255にあたるため、RGB 255,255,255と同じ白を意味します。
#000000はRGB 0,0,0と同じ黒です。
#FF0000、#00FF00、#0000FFは、それぞれ赤、緑、青の基本色を表す代表的な16進数カラーコードです。
カラーコード表を見るときは、最初の2桁が赤、中央の2桁が緑、最後の2桁が青だと理解しておくと読みやすくなります。
たとえば#3366CCなら、33は赤の51、66は緑の102、CCは青の204です。
青の成分が最も高く、赤と緑がそれより低いため、やや明るい青系の色と考えられます。
16進数では00が最小、FFが最大ですが、80がちょうど中央の128付近にあたります。
そのため、#808080は中間の灰色としてよく知られています。
また、#F5F5F5のように同じ2桁が3回繰り返されるコードは、RGB成分が同じ無彩色です。
#FFCC00のように赤と緑が高く青が低いコードは、黄色から金色に近い色合いになります。
CSSでは#FFFのような3桁の省略表記も使えますが、これは各桁を2回繰り返した#FFFFFFと同じ意味です。
ただし、PowerToysやデザイン仕様書で6桁のコードを受け取った場合は、桁数を省略せずそのまま扱うほうが確認しやすいでしょう。
アルファ値を含む8桁表記では、#RRGGBBAAのように末尾へ透明度が追加される場合があります。
透明度まで扱う場面では、6桁コードと8桁コードを混同しないことが必要です。
【操作のポイント】16進数の6桁は赤、緑、青の2桁ずつに区切って読み、先頭のシャープ記号を含めるかどうかは入力先のルールに合わせましょう。
ブラウザーとWindows設定で色を確認する方法
続いては、Webページの色とWindows 11のアクセントカラーを確認する方法について解説していきます。
画面に見えている色を再現するだけならカラーピッカーで十分ですが、Webページに設定された元のCSSやWindowsの設定値を知りたい場合は、対象の設定画面や開発者ツールで確認します。
ブラウザーの開発者ツールでWebページのCSS色を確認
Webサイトの背景、文字、ボタン、枠線などに設定されているカラーコードを正確に確認したい場合は、Google ChromeやMicrosoft Edgeの開発者ツールを使います。
画面上から拾うカラーピッカーと異なり、開発者ツールではWebページのCSSに指定された値を確認できるため、透明度や擬似要素を含むデザインを調べるときに有利です。
まず、確認したいWebページをChromeまたはEdgeで開き、対象の要素の上で右クリックします。
表示されたメニューから検証を選ぶと、ブラウザーの右側または下側に開発者ツールが表示されます。
開発者ツール左上の要素選択アイコンを押し、ページ上の調べたいボタンや見出しをクリックします。
HTML要素が選択されると、スタイルの欄にcolor、background-color、border-colorなどのCSSプロパティが表示されます。
文字色ならcolor、背景色ならbackground-color、枠線ならborder-colorを確認すると、目的のカラーコードへたどり着きやすくなります。
たとえばbackground-colorの横に#217346と表示されていれば、その要素の背景色は16進数で#217346です。
色見本の小さな四角をクリックするとカラーピッカーが開き、HEX、RGB、HSLなどの形式を切り替えながら値をコピーできます。
スタイル欄に複数の同じプロパティがある場合は、打ち消し線が付いていない、実際に適用されているルールを確認しましょう。
また、backgroundにlinear-gradientが設定されているときは、単色ではなく複数のカラーコードと角度が指定されています。
その場合は一つの色だけをコピーしても元の見た目を再現できないため、グラデーション全体の記述を確認する必要があります。
Webページによっては、CSS変数として色が定義されています。
たとえばvar(–main-color)のように表示されたときは、その変数の定義元をたどることで、共通して使われている正式なコードを確認できます。
開発者ツールでの変更は基本的にブラウザー上の一時的な表示変更なので、他人のWebサイトを閲覧中に値を変えても公開ページそのものが書き換わるわけではありません。
【操作のポイント】Web要素を選択したら、見た目の目的に応じてcolor、background-color、border-colorを見分け、打ち消し線がない設定値をコピーしましょう。
Windows 11のアクセントカラーとテーマ色の確認
Windows 11では、スタートメニュー、タスクバー、ウィンドウ枠、設定画面などにアクセントカラーやテーマ色が反映されます。
現在の設定色を確認したい場合は、デスクトップの何もない場所を右クリックし、個人用設定を開きます。
設定アプリが開いたら、左側または画面内の個人用設定から色を選択します。
ここではモードの選択、透明効果、アクセントカラー、スタートとタスクバーへの表示といった項目を確認できます。
アクセントカラーを手動にすると、Windowsが提示する色の一覧から選択できます。
色の一覧に目的の色がない場合は、色を表示またはカスタムカラーを選び、詳細設定でRGB値を入力します。
Windowsのアクセントカラーを画面から拾う場合でも、テーマの明暗、透明効果、壁紙との重なりにより見え方が変わることがあります。
そのため、デザイン資料として正確な数値を残したいなら、設定画面で指定したRGB値そのものを記録するほうが確実です。
アクセントカラーはWindowsの一部の領域に反映されますが、すべてのアプリが同じように色を使うわけではありません。
たとえばOfficeアプリには独自のテーマ設定があり、Windows側のアクセントカラーと完全には連動しないケースがあります。
また、ダークモードでは同じアクセントカラーでも背景とのコントラストが変わり、文字の読みやすさが下がる場合があります。
背景色と文字色を決めるときは、好みだけでなく、明るいテーマと暗いテーマの両方で視認性を確認することが大切です。
Windowsの画面を資料やマニュアルで再現する場合は、アクセントカラーだけでなく、タイトルバー、境界線、選択状態、無効状態の色も別に確認すると自然な仕上がりになります。
【操作のポイント】Windowsの配色を再現するときは、画面から見た色だけで判断せず、個人用設定のカスタムカラーでRGB値を確認し、明るいテーマと暗いテーマで見え方を比べましょう。
まとめ Windows 11でカラーコードを調べる方法
Windows 11でカラーコードを調べる方法は、確認したい対象によって使い分けると効率的です。
画面上に表示されている任意の色をすばやく取得したい場合は、PowerToysのColor Pickerを使うと、RGB値や16進数のHEXコードを取得できます。
画像ファイル内の色を確認したい場合は、ペイントで画像を開き、スポイトで色を選択してから色の編集画面でRGB値を確認しましょう。
Webページに設定された本来のCSSカラーコードを知りたい場合は、ChromeやEdgeの開発者ツールでcolorやbackground-colorを確認する方法が適しています。
RGBは赤、緑、青を0から255で表す方式で、16進数のカラーコードはRGBをRRGGBBの6桁へ変換した表記です。
画像の縁や文字の周辺では中間色を拾いやすいため、スポイトやカラーピッカーでは均一な色面の中央を選ぶことが失敗を減らすコツになります。
また、画面から取得した色は表示環境や透明効果の影響を受ける場合があります。
ロゴや企業カラーなど正確さが求められる色は、可能な限り公式の仕様書に記載されたRGB値や16進数を基準にしてください。
用途に合う方法でカラーコードを確認し、Windowsの設定、Office資料、画像編集、Web制作へ正しく活用していきましょう。
