カラーパレット生成ツール
ベースカラーから配色パターンを自動生成
ベースカラーを選ぶだけで、補色・類似色・トライアド・スプリットコンプリメンタリーなどの配色パターンを自動で生成します。Webデザイン・プレゼン・イラスト制作の色選びにご活用ください。入力したデータはブラウザ内のみで処理され、サーバーには一切送信されません。
明度バリエーション
使い方
ベースカラーを選択
カラーピッカーまたはHEXコード入力でベースとなる色を選びます。
配色パターンを選択
補色・類似色・トライアド・分裂補色・モノクロから配色ルールを選びます。
カラーコードをコピー
生成されたパレットの各色をクリックすると、HEXコードがクリップボードにコピーされます。
配色理論について
色彩調和の理論に基づいた配色パターンを使うことで、バランスの取れた美しいデザインを作ることができます。本ツールで生成できる5つの配色パターンを解説します。
補色（Complementary）
色相環上で正反対（180度）に位置する2色の組み合わせ。コントラストが強く、インパクトのあるデザインに適しています。ボタンやCTAなどの強調要素に効果的です。
類似色（Analogous）
色相環上で隣り合う（±30度）色の組み合わせ。統一感があり、穏やかで調和のとれた印象を与えます。背景とテキストの配色に適しています。
トライアド（Triadic）
色相環上で120度ずつ離れた3色の組み合わせ。バランスがよく、活気のある配色になります。1色をメインに、他の2色をアクセントとして使うのが効果的です。
分裂補色（Split-Complementary）
補色の代わりに、補色の両隣（±150度）の2色を使う配色。補色よりも柔らかいコントラストで、初心者にも使いやすい配色パターンです。
モノクロマティック（Monochromatic）
1つの色相の明度・彩度を変えた配色。統一感が最も高く、洗練された印象を与えます。UIデザインのベースカラーとして人気があります。
よくある質問
カラーコードをコピーするにはどうすればいいですか？
パレットに表示された各色のカードをクリックすると、HEXカラーコードが自動でクリップボードにコピーされます。
RGBやHSLのコードも取得できますか？
各カラーカードにはHEXとRGBの両方のコードが表示されています。HSLでの変換が必要な場合は、当サイトのカラーコード変換ツールと併用してください。
入力したデータは保存・送信されますか？
いいえ。すべてのデータはブラウザ内のみで処理され、サーバーに送信されることは一切ありません。ページを閉じるとデータは消えます。
無料で使えますか？
はい、完全無料です。登録やアカウント作成も不要です。
データについて
このツールは時効性のないデータのみを使用しています。計算式や変換係数は普遍的な値に基づいており、定期的な更新は不要です。
このツールへのご意見・不具合報告
ご利用環境（ブラウザ・OS）は多種多様なため、すべての環境でのテストが困難です。不具合や使いにくい点がありましたら、ぜひお知らせください。改善の参考にさせていただきます。
入力データはブラウザ内のみで処理されます。サーバーへの送信は一切ありません。