AIで配色パレットを無料生成｜デザイン初心者でも調和の取れた色選びができる
公開日: 2026-05-04
「Webサイトを作りたいけど色選びでいつも迷う」「ブランドカラーは決まったけど、それに合うサブ色・アクセント色が決まらない」「とりあえず青系で揃えたら、どこでも見るような月並みなサイトになった」——こんな悩みは色彩感覚の問題ではなく、配色パレットを系統立てて作っていないことが原因です。本記事では、AI配色パレット生成ツールを使って5色のパレットを無料で作る手順、色彩理論の基本ルール、WCAGコントラスト比のチェック方法、Tailwind / CSS変数への落とし込みまでを解説します。
5色配色パレットの基本構成
プロのデザイナーが使う配色パレットは、単に「好きな色を並べる」ものではありません。役割が決まった5色を1セットとして組み立てるのが基本です。
- メインカラー（1色）：ブランドの顔。ロゴ・主要CTA・ヘッダーで使用
- サブカラー（2色）：メインを支える。アクセントになり過ぎず、引き立てる役割
- アクセントカラー（1色）：注意を引きたい部分（CTAボタン・通知バッジ）に少量だけ
- ニュートラル（1色）：本文・ボーダー・背景で使うグレー〜ベージュ系
- 配色比率の目安は 60:30:10（メイン60%・サブ30%・アクセント10%）
色彩理論の基本パターン
補色配色（Complementary）
色相環で正反対に位置する2色を組み合わせる方法。コントラストが最大なので、CTAボタンや警告メッセージで使うと目立ちます。例: 青と橙、紫と黄、赤と緑。Webサイト全体に補色を多用すると目がチカチカするので、アクセントとして1〜2箇所に絞るのがコツです。
類似色配色（Analogous）
色相環で隣接する3色を組み合わせる方法。落ち着きがあり、自然で調和した印象になります。例: 青・青緑・緑、赤・赤橙・橙。BtoB系の落ち着いたサイトや、写真の多いポートフォリオに向いています。
三色配色（Triadic）
色相環を3等分した3色を組み合わせる方法。バランスが良く、ポップで活発な印象になります。例: 赤・黄・青、橙・緑・紫。子ども向けサービス、エンタメ系、SNSアプリで使われます。
モノトーン配色（Monochromatic）
同じ色相で明度・彩度を変えた色を組み合わせる方法。最も洗練された印象になりますが、単調になりやすいので、ニュートラルカラーを必ず1色追加して立体感を出します。
WCAGコントラスト比のチェック
どんなに美しいパレットでも、テキストと背景のコントラスト比が低いと読めません。WCAG 2.1 ガイドラインでは下記の基準が定められています。
- AA（最低基準）: 通常テキスト 4.5:1 以上 / 大きい文字（18pt以上）3:1 以上
- AAA（推奨基準）: 通常テキスト 7:1 以上 / 大きい文字 4.5:1 以上
- チェック方法: ブラウザの DevTools「アクセシビリティ」タブ、または WebAIM Contrast Checker
- NG例: 薄いグレー（#999）on 白背景 = 2.85:1 で AA 不合格
- OK例: ダークグレー（#374151）on 白背景 = 11.6:1 で AAA 合格
ブランドカラーから5色を派生させる手順
既にブランドカラー（メイン1色）が決まっている場合、残り4色を派生させる手順は次の通りです。
- 1. メインカラーのHSL値を取得（例: 青 #2563eb → H=217 S=83% L=53%）
- 2. サブカラー1：色相を±30度ずらす（217 → 187 や 247）
- 3. サブカラー2：類似色（色相を±15度・彩度を下げる）
- 4. アクセントカラー：補色（色相+180度）または三色配色の3色目
- 5. ニュートラル：彩度を5%以下まで下げ、明度で3〜5段階の階調を作る
AIで配色パレットを作る手順
free-ai-tools.jpの配色パレットツールに以下を入力すると、調和の取れた5色パレットがHEX値・RGB値・HSL値付きで生成されます。
- 1. メインカラー（HEX値またはカラーピッカー）
- 2. サイトの雰囲気（清潔感／温かみ／高級感／元気／落ち着き から選択）
- 3. ターゲット業種（コーポレート／EC／SaaS／メディア／クリエイティブ）
- 4. 配色パターン（補色／類似色／三色配色／モノトーン から自動 or 指定）
- 5. ダークモード対応の有無
関連ツール（すべて登録不要）
よくある質問
- Q. メインカラーが決まっていない場合は？
- A. まず「サイトの目的」と「業種」から色相を決めます。BtoB SaaS なら青系、医療・福祉なら緑系、女性向け美容なら赤系・ピンク系、教育なら橙系・黄系が定番です。決まらない時は、競合5社のメインカラーを抽出してみると、業界の暗黙ルールが見えてきます。逆に「あえて外す」戦略もありますが、その場合は別の要素（フォント・レイアウト）で業界らしさを補う必要があります。
- Q. ダークモード対応の配色パレットは別途必要ですか？
- A. 別の5色パレットを作るのではなく、同じパレットを「明度を反転」させて使うのが基本です。メインカラーは色相を保ったまま明度を上げ（彩度はやや下げる）、ニュートラルは白背景用と黒背景用の2セットを用意します。Tailwind の dark: プレフィックスや CSS の prefers-color-scheme で切替えれば、HEX値2セットで完結します。
- Q. Tailwind CSS にどう取り込めばいいですか？
- A. tailwind.config.ts の theme.extend.colors に、生成されたHEX値を「primary / secondary / accent / neutral」のキーで登録します。各色は 50 / 100 / 200 ... 900 の階調を生成しておくと、bg-primary-500、text-primary-700 のように柔軟に使えます。階調生成は Tailwind Color Generator や UI Colors（uicolors.app）で1クリックです。