カラーパレットジェネレーター
美しい5色ハーモニーパレットを生成し、色をロックし、CSS変数をエクスポート。
ランダムカラーパレットジェネレーター：美しい5色スキームを瞬時に作成
モダンなWebアプリの開発、スタートアップのブランディング、SNSグラフィックの作成、ゲームUI素材のデザインなど、バランスの取れた調和のとれたカラーパレットは不可欠です。当サイトのランダムカラーパレットジェネレーターは、補色・トライアド・アナロジー・モノトーン・サイバーパンクネオンなどの数学的な色彩理論モデルに基づき、美しい5色のカラースキームを生成します。
Spacebarのようなシンプルなキーボードショートカットを使えば、毎分何百もの新しい配色を試しながら、気に入ったスウォッチをロックし、明度・彩度を微調整して、クリーンなCSS変数・HEX・RGB・Tailwindトークンとして直接書き出せます。
スペースキーで再生成＆ロック
スペースキーで新しいパレットを生成。スウォッチの鍵アイコンをクリックすると固定され、周囲に調和する色だけを再ロールできます。
数学的ハーモニー
360°のHSLカラーホイール上で較正されたアナロジー、トライアド、補色、スプリット補色、パステル、ネオンの各パレットを切り替えられます。
ワンクリックCSS＆Tailwind
パレット全体をroot CSSカスタムプロパティ、Tailwindテーマ拡張、HEX配列、JSON定義としてワンクリックでコピー。
コントラスト＆アクセシビリティ
視覚的な明度バランスにより、高コントラストのテキスト表示と、ボタンやWebヘッダーに適したWCAG AA準拠の色の組み合わせを実現します。
🌈Web・グラフィックデザインのためのカラーハーモニーモードを理解する
| ハーモニーのルール | カラーホイールの式 | ビジュアルの印象 | おすすめの用途 |
|---|---|---|---|
| アナロジー | 隣接する色相（±30°） | 穏やか、統一感、静けさ | ナチュラル系ブランド、ウェルネスアプリ、グラデーション |
| 補色 | 反対側の色相（180°） | 高コントラスト、鮮やか、力強い | CTAボタン、スポーツブランド、バッジ |
| トライアド | 正三角形（120°） | ダイナミック、遊び心、バランス | ゲーミングサイト、SaaSランディングページ、インフォグラフィック |
| モノトーン | 同一色相で明度・彩度を変化 | ミニマル、洗練、プロフェッショナル | 開発者ツール、金融ポータル、クリーンなUIテーマ |
| サイバーパンク／ネオン | 高彩度＋暗いアンカー | 未来的、電子的、エッジィ | eスポーツ、クリプト系プロジェクト、ダークモードダッシュボード |
🚀4ステップで作るプロ仕様デザインパレット
高コントラストが必要か、繊細なミニマリズムが必要かに応じて、配色プリセット（トライアド、アナロジー、ランダムなど）を選択します。
新しい組み合わせを即座に生成。ロールごとに5つのパレット枠全体の明度・彩度の調和比率が再計算されます。
お気に入りのメインブランドカラーの鍵アイコンをクリック。スペースキーを押し続けると、それに合わせたアクセントカラー背景色が周囲に生成されます。
スウォッチをクリックするとHEXコードをコピー。CSSエクスポートを使えば、スタイルシート変数一式をFigmaやコードエディタへ直接取り込めます。
❓よくある質問
カラーハーモニージェネレーターは補色をどのように計算していますか？▾
ジェネレーターは標準的なRGB値を円柱形のHSL（色相・彩度・輝度）色空間に変換します。古典的な色彩理論の公式に基づき、360°の色相環上に角度を均等に配置し（例：補色は180°、トライアドは120°）、くすんだ読みにくい配色にならないよう輝度の割合を動的に調整しています。
新しい色を生成している間、特定の色をロックできますか？▾
はい！任意のカラーカードの鍵アイコンをクリックしてください。ロックされた色はその場に固定され、スペースキーや生成ボタンを押してもロックされていない残りの枠だけがランダム化され、最適な補色を見つけられます。
カラーパレットをCSSやTailwindにエクスポートするには？▾
「CSSをエクスポート」ボタンをクリックすると、クリーンなCSS変数（:root { --color-1: #hex; ... }）がクリップボードにコピーされます。プロジェクトのスタイルシートやグローバルCSSに直接貼り付けることも、tailwind.config.js のテーマカラー拡張内でマッピングすることも可能です。
このパレットはWebアクセシビリティ（WCAG）の基準に適合していますか？▾
ハーモニージェネレーターは各スウォッチの相対輝度に応じて、コントラスト用テキストラベル（黒または白）を自動的に調整します。Webインターフェースに色を適用する際は、WCAG AA要件を満たすため、本文テキストが背景要素に対して少なくとも4.5:1のコントラスト比を確保するようにしてください。
生成したカラーパレットを商用ブランディングやWebサイトに使えますか？▾
はい、100%可能です。生成されたすべてのカラーパレット、HEXコード、CSS定義はパブリックドメインであり、個人・商用・クライアント作品を問わず、著作権制限やクレジット表記なしで完全無料で利用できます。
HEX・RGB・HSLの各カラー形式の違いは何ですか？▾
HEX（#RRGGBB）はHTML/CSSのWebデザインで最も一般的な16進数表記です。RGBは赤・緑・青の光チャンネル値を0〜255で指定します。HSLは色を色相（カラーホイール上の0〜360°）、彩度（0〜100%の純度）、輝度（0〜100%の明るさ）で表し、調和のとれたバリエーション生成に直感的です。