オンライン単色カラーパレット生成ツール

単色パレット生成の特徴と使い方

実際の動作例

例えばベースカラーに#FF0000（赤）を指定し、色数を3に設定して計算すると、以下の3色が生成されます。

• #3D0000（暗い赤）
• #FF0000（元の赤）
• #FFC2C2（明るい赤）

このように、元の色の明度は保持されず、HSLの明度を12%から88%まで等間隔に割り当てます。そのため、元のHEXが必ずしも出力に含まれるとは限りません。

色の指定方法

ベースカラーはHEX、RGB、HSV、HSLのいずれの形式でも指定できます。色相と彩度はそのまま維持され、明度のみが変更されます。グレー（彩度0）の場合は無彩色のまま明度だけが変化します。

色数の調整

色数は3〜12の範囲で指定できます。小数が入力された場合は切り捨てられ（例: 3.8は3）、範囲外の値は自動的に3または12にクランプされます。非数値が入力された場合は6として扱われます。

出力の編集と制限

生成された各スウォッチは個別に編集でき、編集内容はそのスウォッチにのみ反映されます。ただし、編集により単一色相の関係が崩れる可能性があります。また、このツールはHSLの明度変化による単色生成であり、物理的な絵の具の混合や不透明度のフェード、知覚的に均一なシェーディングではありません。コントラスト比の評価やエクスポート形式の選択機能はありません。

チェックリスト

• ベースカラーを選択する
• 色数を3〜12で指定する
• 計算ボタンを押してパレットを生成する
• 各スウォッチの色を個別に編集できる
• クリアで初期状態に戻す

よくある質問

Q1: 生成されたパレットに元の色が含まれないのはなぜですか？

このツールはHSLの明度を12%から88%の範囲で等間隔に割り当てるため、元の色の明度がその範囲内にあっても、必ずしも出力に含まれるとは限りません。例えば#FF0000を3色で生成した場合、元の色は含まれますが、他の色数では含まれないことがあります。

Q2: 色数を小数で指定したらどうなりますか？

小数は切り捨てられます。例えば3.8は3として扱われます。また、範囲外の値（例: 100）は12にクランプされ、負の値は3にクランプされます。非数値の場合は6が使用されます。

Q3: 生成されたスウォッチを編集するとどうなりますか？

各スウォッチは独立して編集でき、そのスウォッチの色とテキスト値が更新されます。ただし、編集により単一色相の関係が崩れる可能性があります。また、編集内容は保存されないため、ページをリロードすると初期状態に戻ります。