Color Palette Generatorの使い方｜配色理論を信じすぎないためのツール

:::note ※Color Palette Generatorの操作方法と、目的別の「導線ハブ」記事です :::

このツールを作った理由

配色理論は正しい。補色、類似色、トライアド。理論は正しい。

でも、理論通りに180°反対から色を取ると、明度が近くなってコントラストが取れない。

配色理論は「出発点」。そのまま使うと事故る。

このツールは、理論で出発点を作って、手動で調整するためのもの。理論を信じすぎないためのツール。

🚀 今すぐ使う → Color Palette Generator を開く

使い方

ベースカラーを選ぶ（カラーピッカーまたはHEXコード入力）
配色ルールを選ぶ（色彩理論 or 用途別）
生成されたパレットを確認、必ず個別に色を調整
出力形式を選んでコピー（CSS Variables / Tailwind）

ステップ3が重要。理論で出た色をそのまま使わない。

私の使い方

ステップ1：用途別プリセットから始める

「UIセーフ」か「カーム」を選ぶ。色彩理論から始めることはほぼない。

ステップ2：コントラスト比を確認

パレット内のコントラスト比（最小・最大）を見る。4.5:1 を下回っていたら、明度を調整する。

ステップ3：色を減らす

生成された5色のうち、実際に使うのは3色。残りは削除か、使わないと決める。

配色ルール

色彩理論（私はほぼ使わない）

ルール	説明	私の使用頻度
補色	180°反対	ほぼ使わない
類似色	隣接色	たまに使う
トライアド	120°間隔	ほぼ使わない
モノクロ	同色相の明度違い	よく使う

用途別（私がよく使う）

ルール	説明	私の使用頻度
UIセーフ	迷ったらこれ	最もよく使う
アクセント	CTA・強調向け	よく使う
カーム	落ち着き・高級感	よく使う

プリセットパレット

プリセットから始めて微調整できる。

私がよく使うのは：

Soft Neutral：ミニマルなサイト
Corporate Blue：企業サイト
Tech Dark：ダークモード系

出力形式

CSS Variables（私が使う）

:root {
  --color-1: #4A90D9;
  --color-2: #6B5CD9;
  --color-3: #D9944A;
}

Tailwind

module.exports = {
  theme: {
    extend: {
      colors: {
        palette: {
          '1': '#4A90D9',
          '2': '#6B5CD9',
          '3': '#D9944A',
        },
      },
    },
  },
}

適用イメージ

プレビューエリアでWebサイトモックアップを確認できる。

私はここで「実際に使うとどう見えるか」を確認する。パレットだけ見ても分からないから。

この記事で解決しない場合

状況	読むべき記事
配色理論を知りたい	補色・類似色・トライアドの選び方
コントラスト比を確認したい	コントラスト比とWCAG基準
CSS変数で管理したい	CSS変数でカラーパレットを管理
配色の思想を知りたい	Web配色は「事故を減らす設計」

このツールは、配色理論を「信じすぎない」ために作った。理論で出発点を作って、手動で調整する。それが正解。