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