調和のとれたカラーパレットを生成する方法

カラーパレットを作る前に

このツールは、基準となる色から調和を考慮したカラーパレットを作成するために使います。基準色、パレットの種類、色数を指定すると、配色案をまとめて確認できます。配色の方向性を比較したいときや、デザインの色候補を整理したいときに便利です。

使い方の手順

1. 基準にしたい色を入力します。# を付けない3桁または6桁の16進数も入力でき、先頭の # は補われます。3桁の色は6桁に展開されてから処理されます。
2. パレットの種類を選びます。選択肢は、基準色を中心にまとめる「monochromatic」、反対色を使う「complementary」、近い色相を使う「analogous」、変化を付けた「random」です。
3. 欲しい色数を指定します。指定値は整数に変換され、3から12の範囲に収められます。整数に変換できない入力は5として扱われます。
4. 生成を実行し、表示されたパレットを確認します。認識された種類と有効な色数であれば、指定後の色数と同じ数の色が生成されます。出力は、先頭に # が付いた小文字の6桁16進数です。
5. random を選んだ場合は、色相・彩度・明度が乱数で選ばれるため、同じ条件でも呼び出すたびに異なる色になることがあります。基準色を読み取れない場合や、種類を認識できない場合は、色の代わりにエラー表示になります。

結果の見方と注意点

生成された各値は、Webカラーなどで扱いやすい #rrggbb 形式です。色数を3未満または12超にしても、その数がそのまま採用されるとは限らず、範囲内に調整されます。種類を指定しない場合は monochromatic、基準色を省略した場合は #3498db、色数を省略した場合は5が使われます。

結果を比較するときは、monochromatic で明度のまとまりを、complementary で反対方向の色の組み合わせを、analogous で近い色相の流れを確認します。random は結果が変わり得るため、候補を複数回見比べる用途に向きます。これは配色候補を生成する機能であり、表示された色が特定のデザインに適しているかどうかは、実際の背景色や文字色と合わせて判断してください。

使用例

Webページの配色候補として、青系の基準色から近い色相の4色を確認します。

基準色に #336699 を入力し、種類で analogous、色数で4を指定して生成を実行します。表示された4個の値を確認します。

analogous と色数4で生成すると、4個の小文字6桁16進数が # 付きで表示されます。

制限事項

• random では呼び出しごとに結果が変わることがあり、基準色の解析失敗や未対応の種類ではパレットは生成されません。

よくある間違い

• 基準色の形式を読み取れない、または対応していない種類を指定すると、パレットではなくエラー表示になります。基準色を16進数として入力し、種類は monochromatic、complementary、analogous、random のいずれかに変更してください。

よくある質問

入力を省略した場合はどうなりますか？

基準色を省略すると #3498db、種類を省略すると monochromatic、色数を省略すると5が使われます。

色数に2や15を指定できますか？

3未満の値は3から12の範囲に収められ、12を超える値も同じ範囲に調整されます。整数に変換できない値は5として扱われます。

random の結果は毎回同じですか？

同じ条件でも、random は乱数で色相・彩度・明度を選ぶため、異なる色になることがあります。