カラーパレット生成ツール（無料・登録不要）

CSS変数（カスタムプロパティ）

コピーしたCSSをプロジェクトの :root に貼り付けるだけで使えます。

:root {
  --color-primary: #3B7DEF;
  --color-secondary: #EF7B3B;
  /* ...各色 */
}

使い方: color: var(--color-primary);

Tailwind CSS（v3/v4）

tailwind.config.js の extend.colors に貼り付けることで独自カラーとして使えます。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3B7DEF',
        secondary: '#EF7B3B',
      }
    }
  }
}

使い方: class="text-primary bg-secondary"

WCAG 2.1 のコントラスト比基準

• 通常テキスト（本文）: 4.5:1 以上（AA）
• 大きい文字（18pt以上、または14pt太字以上）: 3:1 以上（AA）
• 厳格基準（AAA）: 通常テキストで 7:1 以上

生成したパレットの「ベース明」「ベース暗」を本文色の候補にし、背景色との組み合わせを コントラスト比チェッカー で1組ずつ確認してください。各カラーカードのWCAGバッジ（白:AA / 黒:AA）も同じ基準で判定しています。リンクの下線や色だけで区別している箇所は、下線を残すか太字を併用し、色以外の手がかりも用意します。

色覚特性への配慮

1型（赤が弱い）・2型（緑が弱い）・3型（青が弱い）の色覚特性では、赤と緑、青と紫のような組み合わせが同じ色に見えることがあります。トライアド（赤+青+黄）やテトラード配色を使う場合は、色相だけでなく明度差・彩度差でも区別できるようにしてください。エラー表示を赤一色に頼らず、アイコンや太字を併用するのが実務上の回避策です。

基準色から配色スキームを選ぶ判断基準

ブランドカラーを1色決めたら、次の基準でスキームを選びます。ロゴや競合と差別化したい強いコントラストが欲しい場合は補色。企業サイトやコーポレートページのように落ち着いた統一感を出したい場合は類似色。子供向け・エンタメ・キャンペーンサイトのように多彩で目立たせたい場合はトライアドが向いています。迷ったら、まず類似色で土台を作り、CTAボタンだけ補色を1点投入する構成が失敗しにくい組み合わせです。

60-30-10の比率配分

生成した配色は「メイン60% ・ サブ30% ・ アクセント10%」の比率で画面に配分すると破綻しません。メインは背景・大面積の余白、サブは見出しやカード背景、アクセントはボタンやバッジなど視線を集めたい箇所だけに使います。パレットの「ベース」をメイン、「ベース明/暗」をサブ、「補色」または「トライアド2」をアクセントに割り当てるのが基本形です。

ロゴ・OGP・UIでの使い回し

同じ配色をロゴ・OGP画像・UIで使い回すと、ブランドの一貫性が生まれます。ロゴは ロゴ作成ツール でこのパレットのHEXコードを入力して作成し、OGP画像やUIのボタン色にも同じ変数を流用してください。ロゴだけ別配色にすると、SNSやサイトで別ブランドに見えてしまうため、必ずCSS変数として一元管理することをおすすめします。