GUIDE
Web サイト / LP の配色を調べる・抽出する方法
「このサイトの色、いい感じだな」と思ったとき、HEX コードを 1 色ずつ拾うのは少し手間がかかります。背景はどの色か、どれくらいの面積を占めているか、文字とのコントラストは足りているか——色は 1 つずつより、ページ全体の配色として読み解けたほうが応用しやすいものです。この記事では、開発者ツールで手作業で調べる方法と、yorunoma で URL を貼るだけで主要な色をコード値ごと取り出す方法を、3 ステップで紹介します。
先に試したい人は → yorunoma で配色を解析する
そもそも「サイトの配色を調べる」とは
配色を調べるとき、まず出てくるのが色コードです。よく使う 3 種類だけ、最初に押さえておきます。
- HEX —
#0A0A0Aのような、#で始まる 6 桁の色コード。Web で一番よく使われる形式。 - RGB — 赤・緑・青の光の強さを 0〜255 で表したもの。
rgb(10, 10, 10)のように書きます。 - HSL — 色相（色味）・彩度（鮮やかさ）・明度（明るさ）の 3 つで表す形式。「同じ色味のまま少し暗くしたい」といった調整がしやすいのが特徴です。
色コードが分かるだけでも一部は再現できますが、それだけだと「どの色が主役か」が見えません。あわせて次の 2 つが分かると、配色そのものを応用しやすくなります。
- 占有率 — その色がページのどれくらいの面積を占めているか。主役の色と差し色の関係が見えます。
- コントラスト比 — 背景色と文字色の明暗の差。読みやすさの目安になる値で、後述の WCAG という基準とあわせて参考にできます。
配色を調べる 3 つの方法
サイトの色を調べる手段は、大きく分けて 3 つあります。それぞれ向き不向きがあるので、簡単に比較します。
方法 1: 開発者ツール（DevTools）で 1 色ずつ調べる
ブラウザに最初から付いている開発者ツールでも、色は調べられます。要素を選んでスタイルのパネルを開けば、その部分の背景色や文字色の HEX が確認できます。スポイト機能で画面上の色を直接拾うこともできます。
無料で、すぐ使えるのが利点です。ただし 基本は 1 色ずつ。ページ全体でどの色が何割使われているか、文字と背景のコントラストは足りているか、といった全体像までは、自分で 1 つずつ調べてまとめる必要があります。
方法 2: カラーピッカーの拡張機能を使う
ブラウザの拡張機能には、クリックした場所の色コードを拾えるものがあります。1 色ずつ調べる手間は減らせます。
ただし、拾えるのは「その場所の色」が中心です。ページ全体の配色設計（主役の色・差し色・占有率の関係）までまとめて見えるものは多くありません。
方法 3: yorunoma で「ページの配色をまとめて」読み解く
yorunoma は、URL を 1 つ貼ると、そのページの主要な色を一覧で出します。色ごとに HEX / RGB / HSL のコード値、占有率、印象までまとまった形で確認できます。1 色ずつ拾って表にまとめる作業を、最初からひとまとめにして見られるのが違いです。
yorunoma で配色を調べる手順（3 ステップ）
実際の流れは 3 ステップです。
調べたいサイトの URL を入力欄に貼って、解析をはじめます。コードの知識は要りません。
解析が終わると、主要な色がカードで並びます。各カードには色の名前、HEX、ページの占有率（「約 N 割」のやさしい表現と正確値）、特徴や印象が表示されます。どの色が主役で、どれが差し色かが一目で分かります。
使いたい色のカードで詳細を開くと、HEX / RGB / HSL をそれぞれコピーできます。配色全体を .md ファイルでダウンロードして、自分の制作環境に持っていくこともできます。気になった色だけを取り出して、手元の作業に使えます。
yorunoma の配色解析で分かること
解析結果では、色ごとに次のような情報がまとまっています。実際に出力される範囲は以下のとおりです。
- HEX / RGB / HSL を色ごとに表示（それぞれコピー可）
- ページ占有率（約 N 割の表現と正確値）
- 組み合わせ推奨表 — 相手の色・用途・コントラスト比・WCAG 判定を並べた表
- 心理的効果 — その色が与えやすい印象
- 採用ブランド例 — 似た色を使っているブランドの例
- 避けるべき組み合わせ — 読みにくくなりやすい組み合わせ
なお、コントラスト比と WCAG は AI 解析による参考値 です。WCAG は文字と背景の読みやすさを段階で表す国際的な目安で、解析では「この組み合わせはこういう値になる」という形で表示されます。配色を客観的に見るときの材料として使えます。
調べた配色を「真似」でなく「応用」するコツ
yorunoma は、サイトを丸ごとコピーするためのツールではありません。参考サイトの配色を材料にして、自分の制作に応用するための道具です。元サイトと同じ配色をそのまま使うのではなく、少しずらして自分のものにすると、クオリティを保ちながらオリジナルに仕上がります。
- 色相をずらす — HSL の色相だけ動かすと、明暗のバランスは保ったまま色味だけ自分のブランドに寄せられます。
- 彩度を落とす / 上げる — 同じ配色設計でも、彩度を変えると印象が変わります。
- 役割だけ借りる — 「主役 1 色 + 差し色 1 色 + 背景」という構成比だけ参考にして、色自体は入れ替える方法もあります。
よくある質問（FAQ）
Q. 背景色の HEX だけ知りたいのですが。 解析結果のカードに、背景に使われている色も HEX で表示されます。その色だけコピーして使えます。
Q. コントラスト比は何のために見るのですか。 背景色と文字色の明暗の差を表す値で、読みやすさの目安になります。yorunoma では参考値として表示されるので、配色を客観的に確認する材料に使えます。
Q. 開発者ツールと何が違いますか。 開発者ツールは基本的に 1 色ずつ調べる形です。yorunoma は主要な色をまとめて一覧にし、占有率や組み合わせの情報まで一度に確認できます。
Q. 無料で使えますか。 プランによって 1 か月に解析できる回数が変わります。詳しくは 料金プランを見る からご確認ください。
まとめ
参考サイトの配色は、開発者ツールで 1 色ずつ調べることもできますが、占有率やコントラストまで含めて全体を読み解くには手間がかかります。yorunoma なら URL を貼るだけで、主要な色をコード値ごとに取り出し、必要な分だけ自分の制作に応用できます。
あわせて読みたい → Web サイトのフォントを調べる方法
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。