カラーパレット ジェネレーター
基準色から配色パターンを作り、HEX・RGB・HSLをそのままコピーできる無料カラーパレットツールです。
#3B82F6 のようなHEXを入力すると、Web UIや資料に使える配色パターンをすぐ比較できます。
配色を生成
生成された配色パターン
生成した配色
配色プレビュー
背景、見出し、本文、ボタンの見え方を同じ画面で確認できます。
使い分けの目安
カラーパレットと配色パターンを作る基本
カラーパレットは、Webサイト、SNS画像、プレゼン資料、ブランド資料で使う色の役割を決めるための小さな設計図です。最初に基準色を決め、背景色、本文色、アクセント色、注意色を分けておくと、画面全体の印象が安定します。この配色ジェネレーターでは、色相差をもとに候補を作るため、ゼロから色を探すよりも短時間で試せます。
「カラーパレット」「配色ジェネレーター」「色 組み合わせ シミュレーション」「配色パターン」を探す人は、単色の変換だけでなく、複数色を並べて比較し、実際の画面や資料で使える組み合わせを素早く決めたいことが多いです。既存のカラーコード変換やDIC変換とは違い、このページは複数色の組み合わせを作って比較する意図に合わせています。
カラーパレット見本：青を基準色にする場合
基準色に #3B82F6 を指定し、類似色を選ぶと、近い色相でまとまった背景・カード向けの候補を作れます。補色ならオレンジ系がアクセント候補になり、トライアドならカテゴリ分けやグラフの3色として使いやすくなります。生成後は各スウォッチのHEX・RGB・HSLをコピーし、実際の文字色との組み合わせをプレビューで確認してください。
| 配色ルール | 向いている用途 | 注意点 |
|---|---|---|
| 類似色 | 資料、ブログ画像、穏やかなUI | 差が弱い場合は文字色を濃くする |
| 補色 | CTA、キャンペーン、比較表 | 面積を均等にすると強すぎるためアクセントに使う |
| トライアド | カテゴリ分け、グラフ、カードUI | 主役色を1つ決めて残りは補助色にする |
| 同系色 | ブランド背景、落ち着いた資料、管理画面 | 濃淡差が足りないと読みにくくなる |
使い方
- 基準にしたい色をカラーピッカーまたはHEXで入力します。
- 類似色、補色、トライアド、4色配色、同系色から目的に近いルールを選びます。
- 色数を選んで「カラーパレットを生成」を押します。
- 各色のHEX、RGB、HSLをコピーし、CSS、Figma、Canva、Excel、PowerPointなどに貼り付けます。
- UIプレビューで背景、本文、ボタンの見え方を確認し、必要に応じて基準色やルールを変えます。
例：青を基準にした配色
たとえば #3B82F6 を基準色にすると、類似色では青から青紫・青緑へ近い色相でまとまりやすい配色になります。補色ではオレンジ系がアクセント候補になり、ボタンや重要なラベルを目立たせたいときに使えます。資料やWeb UIでは、背景に薄い色、本文に濃い色、操作ボタンにアクセント色という役割分担を先に決めると失敗しにくくなります。
配色の限界と確認ポイント
このツールはHSL色相をもとに候補を生成するため、ブランド指定色や印刷用特色を完全に再現するものではありません。印刷物で使う場合は、生成したHEXを RGB⇔CMYK変換ツール で目安値に変換し、最終的には印刷会社の色校正や公式色見本で確認してください。淡い背景に文字を重ねる場合は、コントラスト比 チェッカーでWCAGの合否を確認し、パステルカラーの文字色ガイドも参考にしてください。