ベースカラーを1色選ぶだけで、色相環に基づいた調和の取れたカラーパレットを自動生成します。 UIプレビューやコントラストチェック、CSS・Tailwindへの書き出しにも対応。
ベースカラー
配色理論（ハーモニー）
生成されたパレット
UIプレビュー
見出しテキストの例
生成した配色を実際のUIに近い形で確認できるプレビューです。
コントラストチェッカー（WCAG）
2.58 : 1
エクスポート
配色理論に基づくカラーパレットとは？色選びで失敗しないための考え方
「なんとなく良さそうな色」を勘で選んでしまうと、デザイン全体の統一感やコントラストのバランスが崩れやすくなります。配色理論は、色相環上での色同士の位置関係をもとに、調和の取れた組み合わせを論理的に導き出すための考え方です。
本ツールは、ベースカラーを1色選ぶだけで補色・類似色・トライアド（三角配色）・分割補色・テトラード（矩形配色）・モノクロマティック（単色）の6種類の配色理論に基づいたパレットを自動計算します。デザインSNS向けの「カラーコード変換」ツールが既存の色を別形式に変換するのに対し、本ツールはまだ配色が決まっていない段階で、ゼロから配色案を「生成」するためのツールです。
生成したパレットはその場でUIプレビューに反映され、WCAG基準に基づくコントラストチェックも行えるため、見た目の印象だけでなく実装時の使いやすさまで一度に確認できます。
こんなシーンで便利です
新しいWebサイト・アプリの配色を1から決めたい時に
ブランドカラーやメインカラーが1色だけ決まっている段階で、そこから展開する配色案をいくつかの理論に基づいて比較検討したい場合に使えます。
資料・スライドの配色に統一感を持たせたい時に
プレゼン資料やスライドの見出し・グラフ・強調色などを、根拠のある配色理論に基づいてまとめて決めたい場合に活用できます。
生成したパレットの視認性・アクセシビリティを確認したい時に
配色の見た目だけでなく、文字色と背景色の組み合わせがWCAG基準を満たしているかどうかをコントラストチェッカーでその場で確認できます。
CSS変数やTailwindの設定にそのまま反映したい時に
決定した配色を、CSSのカスタムプロパティやTailwind CSSの設定オブジェクトの形式でそのままコピーし、実装にすぐ反映したい場合に便利です。
使い方は簡単 4ステップ
- 「ベースカラー」を、カラーピッカーまたはHEXコードの直接入力で選びます。
- 「配色理論（ハーモニー）」を、補色・類似色・トライアドなど6種類の中から選びます。
- 必要に応じて「各色をシェード展開する」をオンにし、明暗のバリエーションを追加します。
- 生成されたパレットをUIプレビューやコントラストチェッカーで確認し、CSS・Tailwind形式などでコピーまたはPNG画像としてダウンロードします。
※色の計算からプレビュー表示、画像の書き出しまで、すべてブラウザ内だけで完結し、外部への送信は行われません。
ご利用時の注意点
- 各配色理論には、生成される色の数にそれぞれ基本的な定義があります（例：補色は2色、トライアドは3色、テトラードは4色）。類似色とモノクロマティックのみ、色数をスライダーで調整できます。
- コントラストチェッカーの判定基準はWCAG（Web Content Accessibility Guidelines）の達成基準に基づいた目安です。実際のデザインでは、文字サイズや太さ、周囲の配色との兼ね合いも含めて総合的に確認してください。
- 「保存」したパレットは、このブラウザのタブを開いている間のみ一時的に保持されます。ページを再読み込みすると保存内容は消去されるため、必要な配色はエクスポート機能でコピーまたはダウンロードしておくことをおすすめします。
- 完全無料・安全：選択した色や生成したパレットの情報が外部に送信されることはない、ブラウザ完結型のツールです。
6つの配色理論（ハーモニー）の特徴早見表
それぞれの配色理論が、どのような印象・用途に向いているかをまとめました。
| 配色理論 | 生成される色数 | 特徴・印象 | 向いている用途 |
|---|---|---|---|
| 補色 | 2色 | 色相環上で正反対に位置し、最も強いコントラスト | 強調したいCTAボタン、アクセントカラー |
| 類似色 | 3〜7色（調整可） | 隣り合う色相でまとまりがあり、自然な印象 | 落ち着いた印象のサイト、グラデーション |
| トライアド | 3色 | 色相環を三等分し、鮮やかでバランスの良い印象 | ポップで活発な印象を出したいブランド |
| 分割補色 | 3色 | 補色よりもやわらかく、扱いやすいコントラスト | 補色ほど強すぎない差し色が欲しい場合 |
| テトラード | 4色 | 4色で構成する矩形配色。表現の幅が広い | 複数のカテゴリを色分けしたいUI |
| モノクロマティック | 3〜7色（調整可） | 同一色相の明暗バリエーションで統一感が高い | ミニマルなデザイン、企業サイトのトーン統一 |
配色理論を実務で使いこなすためのポイント
配色理論を知っているだけでなく、実際のデザインにどう落とし込むかを解説します。
結論：まず「主役の色」と「役割」を決めてから配色理論を当てはめる
配色理論はあくまで色同士の関係性を整理する道具であり、生成された色をそのまま均等に使えばよいわけではありません。
まず背景・本文・見出し・アクセント（ボタンなど）といった役割を決めたうえで、どの色をどの役割に割り当てるかを検討することで、理論的に正しいだけでなく実際に使いやすい配色になります。
配色理論ごとの「強さ」の違いを意識する
補色やトライアドはコントラストが強く目を引きやすい一方、使いすぎると落ち着きのない印象になりがちです。
類似色やモノクロマティックは統一感が出しやすい反面、メリハリに欠けることがあります。デザインの目的に応じて、強めの配色と控えめな配色を使い分けることが重要です。
アクセシビリティを踏まえた配色決定の流れ
配色理論だけで色を決めてしまうと、見た目は美しくても文字が読みにくい組み合わせになってしまうことがあります。パレットを生成したら、必ずコントラストチェッカーで文字色と背景色の組み合わせを確認し、WCAGのAA基準（通常文字で4.5:1以上）を満たしているかをチェックしてから採用することをおすすめします。
よくある失敗と対策
配色理論で生成した色をすべて均等な面積で使ってしまう
生成されたパレットの色をすべて同じくらいの分量で使ってしまい、画面全体がにぎやかになりすぎて焦点が定まらないデザインになってしまう失敗です。
💡 対策・解決策を見る▼
コントラストを確認せずに、見た目の好みだけで文字色を決めてしまう
配色理論的には正しい組み合わせでも、実際に文字を乗せてみると背景色との明度差が小さく、読みにくい配色になってしまうことがあります。
💡 対策・解決策を見る▼
モノクロマティックの明度差が小さすぎて、要素の境界がわかりにくくなる
同一色相でまとめたいあまり明度の近い色ばかりを選んでしまい、カードの境界線やボタンの区別がつきにくいデザインになってしまう失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.補色・トライアド・類似色などの配色理論とは何ですか
A. 色相環上での色同士の位置関係に基づいて調和の取れた組み合わせを導き出す考え方です。正反対に位置する2色を組み合わせる「補色」、色相環を三等分する「トライアド」、隣り合う色を使う「類似色」など、それぞれ異なる印象を生み出します。本ツールでは、これらの理論に基づいた配色案を自動的に計算して提示します。
Q.デザインSNS向けのカラーコード変換ツールとの違いは何ですか
A. カラーコード変換ツールは、すでに決まっている色（HEX・RGB・HSLなど）を別の形式に変換するための「変換」ツールです。一方、本ツールはベースカラーを1色選ぶだけで、配色理論に基づいた組み合わせをゼロから提案する「生成」ツールという位置づけになります。まだ配色が決まっていない段階で使うのが本ツールです。
Q.「各色をシェード展開する」をオンにすると何が変わりますか
A. 生成された各色について、明るめ（ライト）・そのまま（ベース）・暗め（ダーク）の3段階の明度バリエーションを追加で生成します。例えば補色（2色）の場合、シェード展開をオンにすると合計6色のパレットになり、ボタンのホバー状態や背景の濃淡など、実装時に必要になる色幅をまとめて確認できます。
Q.生成したパレットが十分なコントラストを確保できているか確認できますか
A. はい。「コントラストチェッカー」で、パレット内の任意の2色を選ぶとWCAG基準に基づくコントラスト比を自動計算し、通常文字・大きな文字それぞれのAA・AAA基準に適合しているかをその場で確認できます。文字色と背景色の組み合わせを決める際の判断材料としてご活用ください。
Q.生成したパレットをコーディングにそのまま使えますか
A. はい。エクスポート機能から、CSSのカスタムプロパティ（:root変数）形式や、Tailwind CSSの設定ファイルに貼り付けられるオブジェクト形式でパレットをコピーできます。HEXコードの一覧をまとめてコピーすることも可能です。
Q.入力したベースカラーの情報が外部に送信されることはありますか
A. ありません。本ツールは配色の計算からプレビュー表示、画像の書き出しまで、すべての処理をブラウザ内だけで完結する設計になっています。選択した色の情報が外部サーバーに送信されたり保存されたりすることはありません。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。