Color Palette Generator

概要

• 基準となる色を1つ入力するだけで、HSL色空間を使って調和の取れたカラーパレットを自動生成するツールです。

• 明度を変化させた9段階のバリエーション（薄い色〜濃い色）に加え、色相環の関係に基づく補色・類似色・三色配色（トライアド）を生成します。

使い方

1. 1

   基準となる色を入力します（#RRGGBBまたはrgb(r, g, b)形式）。

2. 2

   「パレットを生成する」ボタンをクリックします。

3. 3

   明度バリエーション・補色・類似色・トライアドの各色が表示され、それぞれコピーできます。

入力例・出力例

#3366CC

9段階の明度バリエーションと、補色・類似色・トライアド配色

利用シーン

• ブランドカラーを基準に、UIで使うボタンや背景色のバリエーションを揃える

• デザインのアクセントカラーを選ぶ際に、補色や類似色の候補を確認する

• データ可視化やタグ分類など、複数色を使い分けたい場面での配色候補を得る

よくある質問

注意点

• 生成される配色はHSL色空間上の機械的な計算によるものです。最終的な採用は実際の見た目で確認してください。

• 計算はすべてブラウザ内で完結し、入力した色の値が外部へ送信されることはありません。