配色ジェネレーター｜ベース色（HEX）から調和パレットを自動生成・CSS/Tailwind書き出し（無料）
選択色の微調整
書き出し（エクスポート）
:root {
--color-1: #7C3BED;
--color-2: #3BACED;
--color-3: #3B53ED;
--color-4: #D53BED;
--color-5: #ED3BAC;
}関連する外部ツール
一部のリンクはアフィリエイトリンクを含みます。
関連ツール
色彩理論に基づく無料の配色（カラーパレット）ジェネレーターです。HEX コードを入力するか、カラーピッカーで色を選ぶか、「ランダム」を押すだけで、補色・類似色・トライアド・テトラード・モノクロマティックなどの配色スキームに沿って調和したパレットを即時生成します。気に入った色はロックして残りだけ再生成し、明度・彩度スライダーで微調整、各 HEX をワンクリックコピー、CSS 変数・Tailwind config・JSON に書き出すこともできます。各色には「白文字・黒文字どちらが読みやすいか」と WCAG コントラスト比・AA 合否を表示。すべてブラウザ内で完結し、入力した色データはサーバーに送信されません。
使い方
- 「ベース色」に HEX コード（例：#7C3AED）または CSS 名前色（例：rebeccapurple）を入力するか、カラーピッカーで色を選ぶ。または「ランダム」ボタンでランダムなベース色から始める。
- 配色スキームを選ぶ（補色・類似色・トライアド・テトラード・補色分裂・モノクロマティック）と、パレットが即時更新される。
- 色数（3〜8）をスライダーで選ぶ。
- 気に入った色の鍵アイコンをクリックしてロック。「再生成」ボタン（または入力欄以外で Space キー）でロックしていない色だけを振り直せる。
- スウォッチをクリックして選択し、明度・彩度スライダーで微調整。「全色（相対適用）」スコープで全体を一度に明るく/くすませる。
- 各色のコピーボタンで HEX をコピー。書き出しタブで CSS 変数・Tailwind・JSON のテキストを生成してコピー or ダウンロード。
- 「パレット URL をコピー」で現在のパレットを URL で共有できる。
配色スキームとは
配色スキーム（カラーハーモニー）とは、色相環上の位置関係に基づく「調和して見える色の組み合わせの規則」です。色相の角度関係がベースとなり、明度・彩度の変化で豊かさを加えます。
補色（Complementary）
色相環の真反対（+180°）にある2色。高コントラストで目を引く。アクセントカラーとして効果的。
補色分裂（Split-Complementary）
ベースの補色の両隣（+150° / +210°）を使う3色配色。補色ほど強くなく、使いやすいバランスが得られる。
類似色（Analogous）
隣り合う色相（±30°）を使う配色。まとまりがあり落ち着いた印象。背景や自然な色合いに向く。
トライアド（Triadic）
色相環を3等分（+120° / +240°）した3色。バランスが良く鮮やかな配色。
テトラード（Tetradic）
90°間隔の4色（矩形）。色数が多く華やかだが、寒暖のバランスをとる必要がある。
モノクロマティック（Monochromatic）
単一色相の明度・彩度違いで構成。最も破綻しにくく、上品でまとまりのある印象。
迷ったら「類似色」か「モノクロマティック」から始めると失敗しにくい。
機能紹介
ベース色から生成・ランダム生成
HEX/CSS 名前色/カラーピッカーでベース色を指定するか、「ランダム」で毎回異なるベース色から配色を生成。
ロックして残りだけ再生成
気に入った色を鍵でロック → 再生成（ボタン or Space）でロックしていない色だけが振り直される。しっくりくる配色を素早く探せる。
明度・彩度の微調整
スウォッチを選択してスライダーを動かすと、色相の調和を保ったまま明度や彩度だけを変えられる。「全色」スコープで全体を一度に明るく/くすませることも可能。
HEX のワンクリックコピー
各スウォッチのコピーボタンで HEX を即クリップボードへ。「全 HEX を一括コピー」でパレット全色をまとめてコピーできる。
CSS 変数 / Tailwind / JSON に書き出し
書き出しタブから形式を選ぶ。CSS 変数（`:root { --color-1: #...; }`）・Tailwind の `theme.extend.colors` 形式・JSON 配列のいずれかをコピー or ダウンロード。色値は CSS 互換の大文字 HEX 固定（ロケール整形しない）。
コントラスト・可読性ヒント
各色を背景にしたとき、白文字・黒文字どちらが読みやすいかを WCAG コントラスト比で判定。推奨文字色と AA 合否を色＋テキストで表示（色覚に依存しない）。
活用例
ブランドカラーから配色を決める
ロゴの HEX を入力して補色や類似色スキームを適用すると、サイトのアクセント・背景・文字色の候補がすぐに揃う。
CSS / Tailwind にそのまま貼る
書き出した CSS 変数や Tailwind の `colors` ブロックをそのままコードに貼り付けるだけ。変換作業が不要で実装が速い。
読みやすい配色かアクセシビリティを確認
各色の可読性ヒントで WCAG AA 合否を確認し、文字の読みにくい色を設計段階で見つけられる。
配色の豆知識・注意点
- スキームは「調和した出発点」であり、最終的な配色の良し悪しは用途・分量・文脈によります。生成結果はたたき台として微調整することをおすすめします。
- コントラスト比は目安です。WCAG の計算式に基づいていますが、実際の読みやすさはフォントサイズ・太さ・周囲の色にも左右されます。
- モノクロマティックは明度が極端な値に近づくと彩度が見えにくくなります。ベース色の彩度をある程度高めに保つときれいな濃淡になります。
- 入力した色データはサーバーに送信されません。URL 共有はユーザーが明示的に URL をコピーしたときだけ行われます。
よくある質問
- HEX コード（ベース色）から配色パレットを作れますか？
- はい。「ベース色」欄に HEX コード（# あり/なし・大文字小文字不問）または CSS 名前色（例：rebeccapurple）を入力すると、選択したスキームで調和したパレットを即時生成します。カラーピッカーやランダムボタンも使えます。
- 補色・類似色・トライアドなど配色スキームは選べますか？
- はい。補色（+180°）・補色分裂（+150°/+210°）・類似色（±30°）・トライアド（+120°/+240°）・テトラード（+90°ずつ）・モノクロマティック（単一色相の濃淡）の6種類から選べます。
- 気に入った色を残して、残りだけ作り直せますか？
- はい。色の鍵アイコンをクリックしてロックし、「再生成」ボタン（または Space キー）を押すと、ロックしていない色だけが振り直されます。
- CSS 変数・Tailwind・JSON に書き出せますか？
- はい。書き出しタブで形式を選ぶと、CSS 変数（`:root { --color-1: #...; }`）・Tailwind の `theme.extend.colors` 形式・JSON 配列のテキストが生成され、コピーまたはダウンロードできます。
- 何色まで生成できますか？
- 3〜8色の範囲でスライダーで選べます。スキームの基幹色数に満たない場合は濃淡（tints/shades）で充填します。
- 文字が読める配色か確認できますか？
- はい。各スウォッチに「推奨文字色（白/黒）」と「WCAG コントラスト比」と「AA 合否」を色＋テキストで表示します（色覚に依存しない表示）。
- 色データはサーバーに送られますか？
- いいえ。配色生成・コントラスト計算・書き出しはすべてブラウザ内で行われます。色データは送信・保存されません。URL 共有はユーザーが明示的にコピーしたときだけ行われます。