ブランドカラーから配色パレットを作る方法｜トーン・補色・類似色の使い分けとTailwind shadeの設計
【ご注意】 本記事は2026年5月時点の一般的なWebデザイン・ブランドガイド制作の実務をもとに、個人事業主・小規模法人の方が自前で配色を整える前提でまとめています。大規模ブランドの厳密な色管理（印刷物のPantone指定など）は対象外です。
① なぜブランドカラーから派生色を整える必要があるか
ブランドカラーが1色決まっていても、実際にLP・バナー・サービス資料を作り始めると、その1色だけでは画面が成立しない場面に必ず突き当たります。背景に薄く敷きたい色、ホバー時の濃い色、CTAボタンを目立たせるアクセント、無効状態のグレー、罫線色——いずれもブランドカラーから派生させる必要があります。
このとき「ブランドカラーを適当に明るくしたり暗くしたりすればいい」と考えると、画面ごとに色味がぶれて統一感が失われます。例えばCSSの opacity で透過するだけだと、背景色が変わるたびに見え方が変わってしまいます。filter: brightness() で明度を変えると、青系は緑がかり、赤系は黄色がかってしまうことがあります。
またCTAボタンとリンク色を同じブランドカラーで塗ってしまうと、利用者は「どれが押すボタンで、どれがテキスト内リンクか」を区別できなくなります。配色を計画的に増やすことは、見た目の問題というより情報設計の問題です。
② 配色理論の最低限
派生色を作るときに知っておきたい配色パターンは次の6つです。難しい色彩学の本を読む必要はなく、それぞれが「色相環のどこを取るか」という幾何学的なルールで決まります。
| 配色パターン | 作り方 | 主なユースケース |
|---|---|---|
| トーンスケール | 同じ色相のまま明度を5〜9段階に分ける | 背景／本文／ホバー／罫線などUIの階層表現 |
| 補色 | 色相環で +180°（反対側） | CTAボタン、注目バッジ、フォーカス強調 |
| 類似色 | 色相環で ±30° 程度の隣接色 | セクション背景のグラデーション、ブランドに馴染ませる装飾 |
| トリアド | 色相環を120°ずつ3等分 | 3カテゴリのタグ色、3つのプラン表のテーマ色 |
| テトラード | 色相環から4色を取る配色。スクエア（90°×4の正方形配置）とレクタングル（例: 60°-120°-60°-120°の長方形配置）の2種類がある | 4カテゴリの分類、ダッシュボードの系列色 |
| モノクロ | 彩度を0にした無彩色スケール | 本文色・罫線・無効化UI・ニュートラル背景 |
実務では「トーンスケール＋補色＋モノクロ」の3点セットでほとんどのUIが組めます。情報をカテゴリで分けたい場面（料金プラン、機能比較、ダッシュボードの凡例）でトリアドやテトラードを足す、という順番で考えると迷いません。
③ HEX / RGB / HSL の違いと使い分け
Webで使う色の表記には主にHEX（#RRGGBB）、RGB（rgb(r, g, b)）、HSL（hsl(h, s%, l%)）の3形式があります。値が指す色は同じでも、派生色を作る作業のしやすさはHSLが圧倒的に上です。
- HEX：
#3B82F6のように6桁で色を固定するための表記。デザインデータや納品物の色指定に使う。値の足し引きで色を派生させるのは不向き - RGB：赤・緑・青の光の三原色で表現。透過を扱える
rgba()形式が便利。ただし「明るさだけ変えたい」場合に3チャンネル全部の計算が必要 - HSL：色相・彩度・明度の3軸。色相（H）を固定して明度（L）だけを動かすと、ブランドカラーの「同じ青で濃淡違い」が一発で作れる
例えばブランドカラーを hsl(220, 90%, 60%) として shade 500 基準に置くなら、明度Lを 95% / 90% / 80% / 70% / 60% / 50% / 40% / 30% / 20% の9段階に振るだけで、Tailwind の 50〜900 相当のトーンスケールが作れます（具体値はブランドカラー次第で調整）。彩度Sは中央で最大、両端で少し下げる（くすませる）と自然なグラデーションになります。CSSモダンブラウザでは hsl() をそのまま書けます。
なおTailwind CSS v4.0ではデフォルトカラーパレットが OKLCH 色空間ベースに刷新されており、HSLよりも知覚的に均等な明度ステップ（人間の目に「等間隔の明るさ変化」に感じられるスケール）を目指す方向にあります。自前で派生色を設計する際もHSLで作った後、oklch() 表記に変換しておくと将来的なTailwind公式パレットとの整合が取りやすくなります。
④ Tailwind shade（50〜900）の設計思想
Tailwind CSSの色名は bg-blue-500 bg-blue-700 のように「色名＋数値」で表され、この数値（shade）が50（最も明るい）から900（最も暗い）への明度の段階を意味します。
ブランドカラーをこの体系に組み込むときの基本は次の通りです。
- ブランドカラー本体は shade 500 に置く（ボタン基本色・ロゴ色）
- 50・100：ごく淡い背景、バッジの背景、ホバー時のハイライト
- 200・300：罫線、無効化UI、薄いカード境界
- 400：プレースホルダー、説明文の補助色
- 600・700：ボタンのホバー色、見出しのアクセント
- 800・900：本文の濃色、ダークモード基調色
このマッピングは絶対的なルールではなく、UIの階層と数値の大小を1対1で揃えるための約束事です。「ホバーは現在の色より1段濃くする」と決めれば、500 → 600 に置き換えるだけでよく、デザインの判断が機械化できます。実際の運用では、Tailwindの theme.extend.colors でブランド名のキーを定義し、その下に 50〜900 を持たせるのが標準的です。
shadeの値を1段階増やすときの明度（L）の刻みは、おおむね5〜10%が目安です。等間隔で刻むと、人間の知覚的には中間色が密に感じられることがあるため、両端は刻み幅を広げる調整が入ります（Tailwind公式のグレースケールも厳密な等差ではありません）。
⑤ 配色ミス回避のチェックリスト
パレットを生成した後、本番に投入する前に確認したい項目を5つにまとめました。
- 本文と背景のコントラスト比を測る：パレット上の濃色（800・900）と淡色（50・100）の組み合わせでも、想定外にコントラストが落ちることがあります。コントラスト比チェッカーで必ず数値を確認してください
- 色だけで情報を区別しない：エラー＝赤、成功＝緑だけに頼ると、色覚特性を持つ利用者には伝わりません。アイコンとテキストで二重化する設計にする
- リンクと地の色の差を確保する：本文色とリンク色は色相を変えるか、下線を併用して区別する。リンク色とCTAボタン色も同じ色だと利用者が混乱する
- ブランドカラーの濫用を避ける：1画面に強いブランドカラーを5箇所以上配置すると、視線が散って何が重要か分からなくなります。アクセントは画面あたり1〜2箇所に絞る
- 複数のブランドカラーを混在させない：プライマリ・セカンダリ・アクセントを定義したら、その3色＋ニュートラル以外は基本使わない。装飾色を増やしたいときは既存3色のトーン違いで対応する
配色の良し悪しは、コントラストや色覚への配慮といった計測できる項目と、ブランドの一貫性という計測しにくい項目の2層で評価します。前者はツールで数値化できるので、まずそこを潰すのが効率的です。詳しい基準は配色とコントラスト比 完全ガイドにまとめています。
⑥ 当サイトの「配色パレット生成ツール」の使い方
Toolbox Portalの配色パレット生成ツールは、ブランドカラー1色を入力するだけで6種の配色パターンを同時生成するブラウザツールです。入力した色はブラウザ内のJavaScriptで処理され、外部サーバーには送信されません。アカウント登録も不要です。
- 1色入力で6種パレットを同時生成：トーンスケール・補色・類似色・トリアド・テトラード・モノクロを並べて確認できる
- 3形式で書き出し可能：CSS変数（
--color-primary-500形式）、Tailwind config（theme.extend.colors）、JSON（Figmaやスタイル管理ツールへの取り込み用） - コントラスト比チェッカーと連携：生成したパレット内の任意の2色をワンクリックでコントラスト比チェッカーに送れる
生成したパレットは、バナー最適化ツールでバナーの可読性確認に使ったり、LPコンポーネントビルダーでLPファーストビューを組むときの基調色としてそのまま使えます。
関連ガイドとして、配色とコントラスト比 完全ガイド、バナーデザインの基本、LPの作り方ガイドもあわせてご覧ください。
⑦ 応用：3色ブランドガイドの作り方
個人事業主・小規模法人がデザインシステムを自前で持つ場合、まずは「プライマリ・セカンダリ・アクセント＋ニュートラル」の4スケール構成で十分です。
- プライマリ：ブランドカラー本体。ロゴ・主要なボタン・見出しの装飾に使う。50〜900のshadeスケールを生成
- セカンダリ：プライマリの類似色（色相±30°）または彩度を落とした同系色。背景パネル・補助的なバッジに使う
- アクセント：プライマリの補色または鮮やかな差し色。CTAボタンや「期間限定」バッジなど、画面に1〜2箇所だけ置く
- ニュートラル：彩度ゼロのモノクロスケール。本文・背景・罫線・無効化UIの全部をここで賄う。プライマリの色相をわずかに残したクールグレー/ウォームグレーにすると統一感が出る
この4スケール × 各9段階＝36色がブランドガイドの基本セットになります。JSONとして書き出しておけば、Figmaのカラースタイル、Notionのデザインドキュメント、Tailwind configのいずれにも流し込めます。配色パレット生成ツールは3形式で同時に書き出せるため、ブランドガイドを文書化する手間がほぼゼロになります。
ブランドガイドは一度作って終わりではなく、新しいバナー・LPを作るたびに「この色は4スケールのどこから取ったか」を記録する運用にすると、半年後にも再現性のあるデザインが維持できます。
よくある質問(FAQ)
Q. なぜHSLが派生色の設計に向いているのですか?
HSLは色相（Hue）・彩度（Saturation）・明度（Lightness）の3軸で色を表現するため、「色相を保ったまま明るさだけ変える」「彩度だけ落とす」といった操作が値の足し引きで直感的にできます。HEXやRGBでは同じ操作にRGBチャンネルの非線形な計算が必要で、ブランドカラーの色相を保ちながら濃淡を作る用途には不向きです。
Q. Tailwindのshade 500は何を基準に置けば良いですか?
Tailwindのshade体系では中央の500を「ブランドカラーそのもの」に置くのが基本です。500を中心に、50・100・200は背景や淡いバッジ、300・400はサブUI、600・700はホバーや見出し、800・900は本文濃色やダークモード基調色に対応させると、UIの階層と一致します。明度（HSLのL）を概ね5〜10%刻みで揃えると整ったスケールになります。
Q. 補色をそのままCTAボタンに使って良いですか?
補色（色相+180°）はコントラストが強く視線を集めやすいため、CTAボタンの色として使われることが多い配色です。ただし鮮やかさが強すぎると安っぽく見えたり、本文との可読性が落ちることがあります。補色をベースに彩度・明度を1〜2段落として落ち着かせる、またはスプリットコンプリメンタリー（補色の両隣 ±30°、色相+150°/+210°）に置き換えるとブランド全体になじみやすくなります。
Q. ブラウザ完結ツールを使うメリットは何ですか?
Toolbox Portalの配色パレット生成ツールはブラウザ内のJavaScriptで色を計算し、入力したカラーコードを外部サーバーに送信しません。社内ブランドガイドの色を扱う場面でも情報漏えいの心配がなく、アカウント登録も不要で開いた瞬間から使えます。ネット環境が不安定な打ち合わせ中でも動作します。
Q. 3色のブランドガイドはどのように作れば良いですか?
プライマリ（ブランドカラー本体）、セカンダリ（プライマリと類似色または同系の落ち着いた色）、アクセント（プライマリの補色または彩度の高いアクセント色）の3色を決め、それぞれに50〜900のshadeスケールを生成します。本文色・背景色・罫線・無効化グレーをニュートラルスケールとして別途用意し、合計4スケールでデザインシステムを運用すると、LP・スライド・バナーで配色がぶれません。
Q. ブランドカラーが2色以上ある場合はどう設計すれば良いですか?
ブランドカラーが複数ある場合は、まず「使用比率」を決めてください。プライマリ7割・セカンダリ2割・アクセント1割が一般的な目安です。それぞれに独立したshadeスケールを持たせ、画面ごとに比率を守って配置すると、複数色あっても統一感が崩れません。比率を決めずに同じ強さで使うと、利用者の視線がどこに向かうべきか分からなくなります。