カラーパレットジェネレーター
任意のベースカラーから濃淡と配色ハーモニーを生成します。
ベースカラーを選ぶと、同系色の濃淡スケールに加えて、補色・類似色・トライアド・テトラードのハーモニーを即座に生成します。任意の HEX をワンクリックでコピー。すべてブラウザ内で動作します。
このブラウザは画面取得に対応していません。ピッカーを使うか HEX コードを貼り付けてください。
#2563ebrgb(37, 99, 235)hsl(221, 83%, 53%)色をタップするとベースカラーに設定します。
#8d51a5スウォッチピッカーやスポイト、あるいは HEX・RGB・HSL 値を直接入力してベースカラーを選ぶと、下にスクロールするだけでその色から即座に生成された濃淡スケールと、補色・類似色・トライアド・テトラードの配色ハーモニーが表示されます。気に入った色見本をクリックすれば、その HEX コードをクリップボードにコピーできます。
計算式と方法
濃淡は色相と彩度を固定し明度を変化。ハーモニーは色相を回転:補色 180°、類似 ±30°、トライアド 120°、テトラード 90°。
計算例
- #2563eb → 青のスケール+補色のオレンジとトライアド
よくある質問
配色ハーモニーとは何ですか?
色相環上で固定の関係(補色やトライアドなど)を持つ色の組み合わせで、まとまって見えやすいものです。
補色と類似色の違いは何ですか?
補色は色相環上で正反対に位置し、強いコントラストを生み出すため、目立たせたいボタンやアクセントに向いています。類似色は隣り合う色同士で、落ち着いた調和のとれた印象になるため、背景やグラデーションに向いています。
トライアドやテトラードの配色はいつ使うべきですか?
トライアドは色相環上で等間隔に配置された3色を使い、バランスを保ちながらも鮮やかな印象を与えます。テトラードは2組の補色ペアを使うため色数が最も多くバリエーション豊かになりますが、1色を主役にして残りをアクセントとして使うとまとまりやすくなります。
パレットから直接カラーコードをコピーできますか?
はい。濃淡スケールやハーモニーの各行にある色見本をクリックするだけで、その HEX コードが即座にクリップボードにコピーされます。
このツールはパレットを保存しますか?
いいえ。すべての処理はブラウザ内でローカルに実行され、何も保存・アップロードされません。ページを閉じる前に、必要なコードをコピーするかスクリーンショットを撮っておいてください。
プライバシー
すべての処理はブラウザ内でローカルに実行され、データがアップロードされることはありません。