「配色のルールは分かったけれど、実際にどんな組み合わせにすればいいのか見本が欲しい」——この記事は、そんな方のための配色パターン集です。
PCCSの12トーンごとに、Webサイトでそのまま使える配色例（HEX値付き）と、向いている用途を紹介します。配色を決める手順そのものを知りたい方は、先にWebサイトの配色の決め方をご覧ください。
各トーンの全色値はPCCSトーンのRGB値をクリックコピーで一覧できます。この記事の色値もすべて同ページの値を使用しています。
なお、ここで紹介する配色はあくまで「見本」です。理論やパターンは、知っておいて損はない土台・参考ですが、唯一の正解ではありません。見本を眺めるうちに「この感じだ」と閃いたら、その直感を大切にしてください。
トーンを揃えると配色はまとまる
配色に統一感を出す近道のひとつが、同じトーンの中から色を選ぶことです。トーンとは明度と彩度の組み合わせ（色の調子）のことで、色相が違ってもトーンが揃っていれば、配色は自然とまとまって見えます。
この記事の配色例は、次の3色構成で示しています。面積比の考え方はWebサイトの配色の決め方で詳しく解説しています。
| 役割 | 面積の目安 | 使いどころ |
|---|---|---|
| ベースカラー | 約70% | 背景・余白 |
| メインカラー | 約25% | 見出し・ナビ・ボタン |
| アクセントカラー | 約5% | CTA・強調 |
鮮やかなトーンの配色（v・b・s・dp）
ビビッドトーン（v）の配色例
| 役割 | 色 | HEX |
|---|---|---|
| ベース | 白 | #FFFFFF |
| メイン | 青 | #093F86 |
| アクセント | オレンジ | #FF7F00 |
12トーンの中で最も彩度が高く、強くはっきりした印象を与えるトーンです。セール告知やイベント、子ども向けコンテンツなど、元気さや注目度がほしい場面に向いています。
ブライトトーン（b）の配色例
| 役割 | 色 | HEX |
|---|---|---|
| ベース | 白 | #FFFFFF |
| メイン | 青 | #386CB0 |
| アクセント | オレンジ | #FF9914 |
ビビッドに白を少し混ぜたような、明るく健康的な印象のトーンです。スポーツ・エンタメ・若年層向けのサービスに向いています。
ストロングトーン（s）の配色例
| 役割 | 色 | HEX |
|---|---|---|
| ベース | 白 | #FFFFFF |
| メイン | 青 | #205B85 |
| アクセント | オレンジ | #D9760F |
ビビッドより少し落ち着いた、濃く力強い印象のトーンです。食品や店舗サイトなど、活気と信頼感を両立させたい場面に向いています。
ディープトーン（dp）の配色例
| 役割 | 色 | HEX |
|---|---|---|
| ベース | 白 | #FFFFFF |
| メイン | 青 | #04436D |
| アクセント | 茶系オレンジ | #A34A02 |
深みのある、伝統的で落ち着いた印象のトーンです。和風のサイトや老舗、高級食品など、格式や歴史を感じさせたい場面に向いています。
明るくやさしいトーンの配色（lt・sf・p）
ライトトーン（lt）の配色例
| 役割 | 色 | HEX |
|---|---|---|
| ベース | 白 | #FFFFFF |
| メイン | 青 | #679FCA |
| アクセント | オレンジ | #FDB46C |
軽やかで親しみやすい印象のトーンです。保育・教育・ファミリー向けのサイトなど、明るさとやさしさを両立させたい場面に向いています。
ソフトトーン（sf）の配色例
| 役割 | 色 | HEX |
|---|---|---|
| ベース | ライトグレー | #F5F5F5 |
| メイン | 青 | #516690 |
| アクセント | オレンジ | #D89048 |
穏やかで落ち着いた印象のトーンです。医療・介護・リラクゼーションなど、安心感を伝えたいサイトに向いています。
ペールトーン（p）の配色例
| 役割 | 色 | HEX |
|---|---|---|
| ベース | 白 | #FFFFFF |
| メイン | 青 | #B3CDE3 |
| アクセント | ピンク | #FBB4C4 |
淡くやわらかい、繊細な印象のトーンです。ベビー用品・美容・女性向けサービスに向いています。ただしメインカラーが淡いため、文字色には別途しっかりコントラストの取れる色を確保してください。
落ち着いたトーンの配色（d・dk・ltg・g・dkg）
ダルトーン（d）の配色例
| 役割 | 色 | HEX |
|---|---|---|
| ベース | ライトグレー | #F5F5F5 |
| メイン | 青 | #1E6282 |
| アクセント | レンガ系 | #B25938 |
少しくすみのある、堅実で誠実な印象のトーンです。士業や製造業など、真面目さや実直さを伝えたいサイトに向いています。
ダークトーン（dk）の配色例
| 役割 | 色 | HEX |
|---|---|---|
| ベース | 白 | #FFFFFF |
| メイン | 濃青 | #0E4251 |
| アクセント | 茶 | #6C4919 |
重厚で大人の印象を与えるトーンです。高級ブランドやバーなど、落ち着きと格の高さを演出したい場面に向いています。
ライトグレイッシュトーン（ltg）の配色例
| 役割 | 色 | HEX |
|---|---|---|
| ベース | 白 | #FFFFFF |
| メイン | グレイッシュブルー | #91A4B6 |
| アクセント | ベージュ | #D9BA97 |
上品で控えめな印象のトーンです。和モダンなサイトや、落ち着いた雰囲気の美容系サイトに向いています。
グレイッシュトーン（g）の配色例
| 役割 | 色 | HEX |
|---|---|---|
| ベース | ライトグレー | #F5F5F5 |
| メイン | 濃灰青 | #384E5D |
| アクセント | 灰茶 | #7D6764 |
シックで渋い印象のトーンです。大人向け・高単価のサービスなど、落ち着いた世界観をつくりたいサイトに向いています。
ダークグレイッシュトーン（dkg）の配色例
| 役割 | 色 | HEX |
|---|---|---|
| ベース | 白 | #FFFFFF |
| メイン | 墨色系 | #222831 |
| アクセント | 焦茶 | #463B34 |
ほぼ黒に近い、フォーマルで高級感のあるトーンです。黒基調のデザインや、ラグジュアリーな世界観のサイトに向いています。
配色に迷ったら
12トーンの配色パターンを紹介しました。トーンごとの全色値はPCCSトーンのRGB値をクリックコピーから取得できます。色を選ぶ手順から知りたい方はWebサイトの配色の決め方をどうぞ。
最後にひとつ。この記事のパターンも、PCCSという体系も、配色の「正解」を定めるものではありません。知識は基礎や参考として持ちつつ、最終的には実際に色を並べてみて「これだ」と感じたものを選ぶ——私はそれが、そのサイトにとって一番良い配色になると考えています。
自社サイトに合う配色を一緒に決めたい方は、お気軽にご相談ください。
配色の考え方をふまえたブランドの印象設計から、Webサイト制作、ロゴ・イラスト・グラフィックまで一貫してお手伝いします。まずはお気軽にお問い合わせください。
