文 ハル · 更新日 · 2026-09-07
カラーコード — 画面の色を正確に知る方法
色は見えている。必要なのは、それを表す六文字のほうです。確実な方法は三つあり、どれも拡張機能を入れずにできます。そして、ほとんどの人がはまる落とし穴が一つあります — 拾った値は、作った人が書いた値とはかぎりません。
このページでは、画面から色を読み取る三つの方法を正確な順に並べ、HEX・RGB・HSLという表記の違い、同じ色が二つの数字になる理由（カラープロファイル・重ね合わせ・圧縮）、吸ってはいけない場所、そして拾った色を使う前の確認二つを扱います。印刷のようにその数字では足りない場面にも触れます。
色を読む三つの方法 — 正確な順に
ページそのものから読む。 その色がウェブページの一部なら、ブラウザの開発者ツールを開いて要素を選び、計算後のスタイルを見ます。これは画素の標本ではなく、実際に書かれた値です。アンチエイリアスも透過も画像圧縮も介入しません。元の値を返す唯一の方法です。
ブラウザのスポイトを使う。 Chromium系のブラウザは開発者ツールの色見本の中にカラーピッカーを持っていて、画面のどこからでも吸えます。画像や、スタイルの当たっていないものにも使えて、入れるものは何もありません。
スクリーンショットを撮って拡大する。 いちばん遅く、いちばんどこでも通じます。撮って、任意の画像編集ソフトで開き、画素が見えるまで拡大して、目的の一点の色を読みます。別のアプリの中の色、動画の一コマ、ピッカーのない端末ではこれです。
順番には意味があります。下へ行くほど、値が変わりうる工程が一つずつ増えます。
HEX・RGB・HSL は同じ色の三つの書き方
HEXは十六進数の六桁を二桁ずつ — 赤・緑・青 — に区切ったもので、各組は0〜255を十六進で書いた数です。短く、デザインツールがたいていこの形で渡してきます。
RGBは同じ三つの数を十進で書いたものです。計算で扱いやすく、透明度を添えるときはこちらを使います。
HSLは同じ色を色相・彩度・明度に組み替えたものです。精度が上がるわけではありませんが、調整はずっと楽になります —「色味を変えずに少し明るく」はHSLなら一つの数字、HEXなら三つの数字を足並みそろえて動かす作業です。
三つの相互変換で失われるものはありません。同じ空間の同じ一点を指しているからです。変換したら違う色になったなら、変えたのは変換ではありません — 次の節です。
同じ色なのに値が二つ出る理由
ここが落とし穴です。画面から拾った色は表示されたものの測定値であり、書かれた値と画素のあいだにいくつも工程があります。
カラープロファイル。 最近のディスプレイはsRGBの外の色も出せて、システムはパネルへ送る途中で値を変換します。スクリーンショットにsRGBではなくディスプレイのプロファイルが付くこともあり、そうなると「同じに見える色」が、撮ったソフトと開いたソフトによって違う数字になります。
重ね合わせ。 吸えるのは最終的な合成結果です。上に半透明のものが乗っていれば — オーバーレイ、影、ダークモードの覆い — 読んでいるのは混ざった色で、意図した層ではありません。
圧縮。 JPEGは色を明るさより粗く保存するので、写真の中の輪郭付近の画素は数段ずれることがあります。PNGや、PNGで撮ったスクリーンショットにはこの問題がありません。
厳密さが要るなら、一つ目の方法に戻って書かれた値を読んでください。
輪郭・グラデーション — 吸ってはいけない場所
アンチエイリアスとは、文字の輪郭や曲線の縁をわざと中間色でつくることです。字形の一画素内側は文字色と背景色の混合であって、誰かが選んだ色ではありません。広く平らな面の真ん中から吸ってください。
グラデーションには、定義上ひとつの値がありません。どうしても必要なら、どちら側の色が欲しいのかを決めて十分内側から吸うか、両端を読んで二色として扱ってください。
影・グロー・すりガラス風の効果も形を変えた同じ問題です。背後にあるものを使った計算結果なので、背景が変われば数字も変わります。
使う前の確認二つ
文字を載せるならコントラスト。 この目安は言い伝えではありません。W3C 勧告である WCAG 2.2 が、達成基準 1.4.3 で本文4.5対1・大きな文字3対1と定めています。自分の画面では十分に見える配色が、暗いディスプレイでは大きく落ちることがあります。印象ではなく、組み合わせで確かめてください。
色だけが情報を担っていないか。 赤がエラー、緑が成功で、ほかに区別がないなら、その二つの色相を分けにくい人には情報が届きません。おおよそ男性の十二人に一人です。言葉か、記号か、形の違いを足してください。当サイトの色覚・色感覚のページは、実際どう見えるのかを確かめるのに使えます。
どちらも一分もかかりません。そして色が五十か所に散ってからやるより、いま確かめるほうがずっと安く済みます。
その数字では足りない場面
印刷では、HEXはそもそも別の空間の話です。画面は光を出して赤緑青を混ぜ、インクは光を吸ってシアン・マゼンタ・イエロー・黒を混ぜます。両者に固定の換算はありません — 紙とインクと印刷機で答えが変わります。だから印刷所はHEXではなくCMYKの値か特色の番号を聞いてきます。
ブランドの色なら、サイトのロゴから吸うのではなく指定を聞いてください。公表された値が正で、吸った画素はその書き出しを通り抜けてきた何かにすぎません。
ただ同じ色を使い回したいだけなら、使っているツールの表記で一度だけ書き留めて、以後はそこから変換してください。吸い直すたびに、数字がずれる機会が一つ増えます。
出典 W3C「Understanding SC 1.4.3: Contrast (Minimum)」
よくある質問
カラーピッカーは無料ですか。登録は必要ですか。
ブラウザの開発者ツールに入っていて費用はかかりませんし、当サイトの変換ツールもアカウント不要です。色を読むためにどこかへログインする必要は、そもそもありません。値はもう画面の上にあります。
拡張機能を入れる必要がありますか。
要りません。避けられるなら避けたほうがよい部類です。スポイトの拡張機能はページの内容を読む権限を求めますが、それは小さな用途に対して広すぎる権限です。Chromium系のブラウザなら開発者ツールに、画面のどこからでも吸えるピッカーがすでにあります。
吸ってみたら思っていた値と少し違いました。なぜですか。
ほぼ三つのどれかです — 上に半透明のものが重なっていた、アンチエイリアスの縁を吸った、カラープロファイルが表示までの間に値を変換した。平らな面の真ん中から吸い直し、ウェブページ上の色なら画素を測るのではなく要素に書かれた値を読んでください。
八文字のHEXコードは何ですか。
最後の二文字がアルファチャンネル、つまり不透明度です。色の組と同じ書き方なので、FFが完全な不透明、00が完全な透明です。古いソフトは解釈できないことがあり、その場合は六文字の色と不透明度を別々に指定してください。
印刷のためにHEXをCMYKへ変換できますか。
数字は出せますが、HEXとRGBの変換のようには信用できません。画面の色とインクの色は別の仕組みで、結果は紙と印刷機に左右されます。大事な用途なら、自分で変換せずに印刷所へ「どの形式が要るか」を聞いてください。
二つの色が十分に離れているか、どう判断しますか。
眺めて決めずにコントラストを比べてください。自分の画面と照明は、ある組み合わせを実際より良く見せます。そして違いが色相だけに乗っていないかも確かめてください — 色覚のページを通すか、単純に「白黒にしても意味が伝わるか」を問えば分かります。