コンテンツへスキップ
Color Palette Generator
基準となる色から、明度バリエーションと補色・類似色・三色配色（トライアド）のパレットを生成します。
概要
- 基準となる色を1つ入力するだけで、HSL色空間を使って調和の取れたカラーパレットを自動生成するツールです。
- 明度を変化させた9段階のバリエーション（薄い色〜濃い色）に加え、色相環の関係に基づく補色・類似色・三色配色（トライアド）を生成します。
使い方
- 基準となる色を入力します（#RRGGBBまたはrgb(r, g, b)形式）。
- 「パレットを生成する」ボタンをクリックします。
- 明度バリエーション・補色・類似色・トライアドの各色が表示され、それぞれコピーできます。
入力例・出力例
入力
#3366CC
出力
9段階の明度バリエーションと、補色・類似色・トライアド配色
利用シーン
- ブランドカラーを基準に、UIで使うボタンや背景色のバリエーションを揃える
- デザインのアクセントカラーを選ぶ際に、補色や類似色の候補を確認する
- データ可視化やタグ分類など、複数色を使い分けたい場面での配色候補を得る
よくある質問
生成される明度バリエーションはどのように決まりますか？
基準色の色相・彩度を保ったまま、明度（Lightness）を10%刻みで10%〜90%まで変化させた9色を生成しています。
類似色・トライアドとは何ですか？
類似色は色相環で基準色の±30度、トライアドは±120度の位置にある色で、いずれも調和が取れた配色として知られる組み合わせです。
HSL形式の色は入力できますか？
現在は#RRGGBB形式とrgb(r, g, b)形式に対応しています。
注意点
- 生成される配色はHSL色空間上の機械的な計算によるものです。最終的な採用は実際の見た目で確認してください。
- 計算はすべてブラウザ内で完結し、入力した色の値が外部へ送信されることはありません。