基準色からパレット候補を生成する
色をHEXまたはrgb()で指定し、明度違い・彩度違いのどちらかを選んで段階数を指定すると、色相を保ったままのパレット候補を生成します。
使い方とAIOクエリ例
基準色の色相・彩度（または色相・明度）を保ったまま、明度または彩度だけを段階的に変化させたパレット候補を生成します。計算はブラウザ内だけで処理します。
- URLクエリ例:
color_palette_generator.html?color=%232f80ed&mode=lightness&steps=9&format=json - rgb() 表記も使えます:
color_palette_generator.html?color=rgb(47,128,237)&mode=saturation&steps=5&format=json format=jsonは各段階の色コードを含む機械可読JSON、format=rawは生成順のHEXを半角スペース区切りで返します。
配色パレット生成は、基準色1色から「明度違い」または「彩度違い」のどちらかを選んで、色相と一方のパラメータを保ったまま段階的に変化するパレット候補を作るツールです。同じ画像・色カテゴリのカラーコード変換は形式変換、コントラスト比チェッカーは2色間の可読性検査、色覚シミュレーターは色覚特性ごとの見え方の再現が役割で、いずれも「1色をどう理解するか」を扱います。本ツールはその一歩先、「1色から複数色のパレット候補をどう作るか」という配色設計の作業に絞っています。明度違いは基準色の色相・彩度を保ったまま明度だけを薄い方から濃い方へ段階的に変化させ、ボタンのホバー色や背景の濃淡といった単色ベースの階調に使えます。彩度違いは色相・明度を保ったまま彩度だけを鮮やかな方からグレーへ段階的に変化させ、アクセントカラーの強弱バリエーションに使えます。段階数は3〜15の範囲で指定でき、結果はすべてブラウザ内のJavaScriptで計算するため、入力した色が外部へ送信されることはありません。
使い方・サンプル・結果例・注意点
使い方
「基準色」欄にHEX（#RRGGBB / #RGB）またはrgb(r,g,b)を入力するか、右側のカラーピッカーで色を選びます。「生成方式」で明度違い・彩度違いを選び、「段階数」（3〜15）を指定して「生成」ボタンを押すと、指定した段階数ぶんの色コードと色見本が表示されます。
サンプル入力
#2f80ed
結果例
このHEXコードを「明度違い」「9段階」で生成すると、最も薄い1段目は #d0e2fb（L=90%）、基準色に近い中間の5段目は #1470eb（L=50%）、最も濃い9段目は #04162f（L=10%）のように、色相と彩度を保ったまま明度だけが変化した9色が並びます。同じ基準色を「彩度違い」で生成すると、最も鮮やかな1段目は #1d7dff（S=100%）、最も彩度の低い9段目は #8e8e8e（S=0%、無彩色）になり、色相と明度を保ったまま鮮やかさだけが変化します。
注意点
明度違いはL=90%〜10%、彩度違いはS=100%〜0%の範囲を段階数で均等に割り付けます（両端は基準色そのものの明度・彩度と一致するとは限りません）。基準色が白・黒・グレーなど彩度0の無彩色の場合、色相は数式上0（赤方向）として扱われるため、彩度違いを選ぶと赤みを帯びたパレットになります。段階数に3〜15の範囲外や数値以外を指定した場合はエラーにせず9段階にそろえます。生成方式（mode）に無効な値を指定した場合も同様にエラーにせず明度違いにそろえます。基準色の入力欄自体が空、または64文字を超える場合や、#RRGGBB・#RGB・rgb(r,g,b)のいずれの形式とも一致しない場合はエラーになります。
こんなときに使えます
- UIデザイナーが、ボタンやリンクの基準色から、通常・ホバー・押下時に使う明度違いの階調セットを一括で作る
- 資料作成者が、グラフの1系列に使う基準色から、内訳や強弱を表す彩度違いのアクセントカラーを作る
- Webデザイナーが、ブランドカラー1色を起点に、背景・枠線・文字色など明度の異なる派生色をまとめて洗い出す
- 配色案を複数比較したい担当者が、同じ基準色から明度違い・彩度違いの両パターンを生成して見比べる
よくある質問
色相そのものを変える配色（補色・類似色など）は作れますか？
作れません。本ツールは基準色の色相を固定したまま、明度または彩度のどちらか一方だけを段階的に変化させる単色系のパレット生成に絞っています。色相を変えた配色案が必要な場合は、生成した色コードを『カラーコード変換』でHSLに変換し、色相の値を手動で調整してご利用ください。
明度違いと彩度違いはどちらを使えばよいですか？
背景の濃淡やボタンの状態変化など、同じ鮮やかさで明るさだけを変えたい場合は明度違いが適しています。基準色をアクセントとして使いつつ、目立たせたい部分と控えめにしたい部分を作りたい場合は彩度違いが適しています。迷う場合は両方生成して見比べるのが確実です。
生成した色は基準色と完全に同じ明度・彩度の段を含みますか？
含むとは限りません。明度違いはL=90%〜10%、彩度違いはS=100%〜0%の範囲を指定した段階数で均等に割り付けるため、基準色そのものの明度・彩度の値が段階の区切りと一致した場合のみ同じ値の段が現れます。基準色を必ず含めたい場合は、結果の中から基準色に最も近い段を選んでご利用ください。
段階数を大きくするとどうなりますか？
段階数（3〜15）を大きくするほど、明度または彩度の変化がより細かい刻みで表示されます。範囲外の値や数値以外を指定した場合はエラーにせず9段階として扱います。
入力した基準色はサーバーに送信されますか？
送信しません。色の解析・HSL変換・パレット生成はすべてブラウザ内のJavaScriptで処理し、入力値が外部へ送られることはありません。URLのクエリ（?color=...&mode=...&steps=...&format=json）で結果を機械可読に取得することもでき、その場合も計算はブラウザ内で完結します。