カラーパレット生成ツール

カラーパレット生成ツールの使い方

カラーパレット生成ツールは、基準色から複数系統のカラーパレットを一括生成できる無料ツールです。会員登録は不要で、入力内容はブラウザの外に送信されません。

1. 基準色を入力またはカラーピッカーで選びます。
2. 補色・トライアド・類似色・単色濃淡の4系統が自動で生成されます。
3. 各色の下にHEXコードが表示されます。
4. 「すべてのHEXをコピー」で一覧をまとめてコピーできます。

配色の考え方について

このツールは色相環（HSLの色相）を基準にした古典的な配色理論に基づいてパレットを生成します。それぞれ用途に向き不向きがあります。

• 補色（色相+180°）：基準色と最もコントラストが強い組み合わせです。アクセントカラーやCTA（行動喚起）ボタンに向きます。
• トライアド（色相±120°）：色相環を三等分した3色です。バランスが取りやすく、にぎやかな配色に向きます。
• 類似色（色相±15°・30°）：基準色に近い色相のみを使うため、まとまりのある落ち着いた配色になります。
• 単色濃淡：色相・彩度は基準色のまま、明度だけを5段階（明るい〜暗い）に変化させたものです。同一トーンでの階調表現（ホバー・アクティブ状態など）に使えます。

よくあるつまずきポイント

• 理論上正しい配色でも、実際のデザインでの面積比（基準色70%・アクセント色10%など）によって印象が大きく変わります。生成された色をそのまま均等に使うのではなく、比率を調整してください。
• 彩度が低い基準色（グレーに近い色）を選ぶと、補色・トライアドの違いが視覚的にわかりにくくなります。
• 生成した色の組み合わせを実際にテキストと背景で使う場合は、コントラスト比チェックツールで可読性も確認してください。