パレットジェネレーター – カラーハーモニーパレット
ハーモニーを選び、インタラクティブな色相環上の連動ポイントをドラッグし、明度を調整してバランスの良いパレットを作成します。
例を試す
インタラクティブカラーホイール
ポイントをドラッグしてハーモニーを回転します。中心に近づけると彩度が下がります。
ベース
#3B82F6補色
#EEAD44ベース · バリエーション 1
#AAC0E3補色 · バリエーション 1
#E0CDADベース · バリエーション 2
#255BB1調和の取れたカラーパレットを即座に作成
相性の良い色を選ぶことは、デザインにおける最も一般的な課題の一つです。色相環上の色相間の関係に基づくカラーハーモニールールは、バランスの取れたパレットを構築するための信頼できる基盤を提供します。
このパレットジェネレーターは任意のベースカラーを取り、標準のハーモニールールを適用して補色のセットを生成します。HEX、RGB、またはHSL形式で色を入力し、ハーモニータイプを切り替えてさまざまな組み合わせを探索してください。
カラーハーモニーの種類
- 補色 — 色相環上で向かい合う2色（180°離れている）。コントラストが高く、大胆な組み合わせ。
- 類似色 — 色相環上で隣接する3色（30°離れている）。自然に調和し、コントラストが低い。
- 三色配色 — 色相環を均等に3分割した色（120°離れている）。鮮やかでバランスが良い。
- 分裂補色 — ベースカラーとその補色に隣接する2色（150°と210°）。純粋な補色より柔らかい。
- 四色配色（スクエア） — 色相環を均等に4分割した色（90°離れている）。豊かで複雑なパレット。
パレットジェネレーターの使い方
- ベースカラーを入力 — HEX、RGB、またはHSLの値を入力するか、ネイティブのカラーピッカーを使用
- セレクターからハーモニータイプを選択
- 色相環上の連動ポイントをドラッグして色相と彩度を変え、明度スライダーで明るさを調整
- 生成されたパレットがカラースウォッチとして表示されます
- 任意のスウォッチのHEXまたはRGB値をワンクリックでコピー
- ハーモニータイプを切り替えて異なるパレットを比較
パレットジェネレーターを使う場面
- 新しいデザインプロジェクトを始め、バランスの取れた配色が必要なとき
- 特定のヒーローカラーを中心にブランドアイデンティティを構築するとき
- 調和の取れたアクセントカラーでUIテーマを作成するとき
- イラストやアートの色の関係を探るとき
- プレゼンテーションやプロトタイプ用のパレットを素早く生成するとき
基本ハーモニーと補助バリエーション
どのハーモニーでも5つのスウォッチを作成します。補色は基本色が2色、類似色・三色配色・分裂補色は3色、四色配色は4色で、残りは彩度または明度を調整した補助バリエーションです。
1つのベースカラーから5色を作成
指定したベースカラーを保ったまま、色相環がハーモニーとバリエーションを計算します。画像全体の主要色には画像パレット抽出を、1ピクセルの正確な色にはカラーピッカーを使用してください。
HEX・RGB・HSL・OKLCHを使用
入力欄はHEX、RGB、HSL、OKLCHに対応しています。1色をHEXまたはRGBでコピーするか、5色すべてをカンマ区切りの大文字HEXコードでコピーできます。
高速・無料・プライベート
すべての計算はブラウザ内で行われます。アカウント、アップロード、保存、サーバー処理はなく、マウス、タッチ、キーボードで操作できます。
色相環は理論上の色関係を示しますが、可読性は保証しません。WCAGの測定にはコントラストチェッカーを、形式変換にはカラーコンバーターを使用してください。
よくある質問
- カラーハーモニーとは何ですか？
- カラーハーモニーとは、視覚的に調和の取れた色の組み合わせのことです。これらの組み合わせは、色相環上の色相間の幾何学的関係に基づいています。
- どのハーモニータイプを使うべきですか？
- デザインの目的によります。補色は強いコントラストを生みます。類似色は落ち着いた印象です。三色配色は鮮やかでバランスが良いです。分裂補色はより柔らかいコントラストを提供します。四色配色は豊かで複雑なパレットになります。
- どの色形式を入力できますか？
- HEX、RGB、HSL、OKLCHを入力でき、形式は自動で判別されます。
- パレットの色はどのように計算されますか？
- ベースカラーはHSLに変換され、選択したハーモニーの正確な色相角に配置されます。各関係は、彩度と明度のバランスの取れた変化を持つ5つの実用的なスウォッチに展開されます。インタラクティブな色相環にはすべてのスウォッチが表示され、1つのポイントをドラッグするとハーモニー全体が回転し、明度スライダーでパレットが更新されます。
- 生成された色をコピーできますか？
- はい。各色をHEXまたはRGBで、パレット全体をカンマ区切りの5つの大文字HEXコードでコピーできます。
- このツールはモバイルで動作しますか？
- はい。レスポンシブな色相環は、モバイルではタッチ、パソコンではマウスまたはキーボードで操作できます。
- このツールは無料ですか？
- はい。ColourPicker.appは完全無料で、登録は不要です。
- 生成したパレットを保存できますか？
- ツールはセッション間でパレットを保存しません。個々の色の値をコピーして、プロジェクトファイルやデザインツールに保存できます。
- 色相環は何を示しますか？
- 色相を円周上に配置し、角度で色相、中心からの距離で彩度、別のスライダーで明度を示します。
- なぜ各パレットは5色なのですか？
- 2〜4色の基本色と必要な補助バリエーションを組み合わせ、一定の5色セットにするためです。
- 基本色と補助バリエーションとは何ですか？
- 基本色は選択した幾何学的関係を作り、補助バリエーションは同じ色相の彩度や明度を調整します。
- カラーハーモニーは十分なコントラストを保証しますか？
- いいえ。ハーモニーは色相の関係を表すものです。前景色と背景色のWCAGコントラストは別途測定してください。