カラーパレットジェネレーター

このツールについて

この配色パレット作成ツールは、補色、トライアド、類似色、スプリットコンプリメンタリー、テトラード、モノクロマティックといった色彩理論の配色を使い、任意のベースカラーから 5 色のパレットを作成して CSS カスタムプロパティとして書き出します。

使い方

1. カラーピッカーでベースカラーを選びます。
2. 補色やトライアドなど、配色の種類を選びます。
3. 生成された 5 つの色見本を確認します。
4. 「CSS 変数としてコピー」をクリックし、パレットをスタイルシートに貼り付けます。

知っておきたいこと

• 補色は色相環上で 180° 離れた色、トライアドは 120° ずつ離れた色です。
• 類似色のパレットは隣り合う色相（約 30° 間隔）を使い、落ち着いたまとまりのある印象になりやすいです。
• スプリットコンプリメンタリーは、ベースの色相と、その補色の両隣（±30°）にある 2 つの色相を組み合わせ、緊張感を抑えつつコントラストを出します。
• モノクロマティックのパレットは色相を 1 つに固定し、彩度と明度だけを変えます。
• このツールは HSL で計算するため、色の明度を変えずに色相を回転できます。

すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。

よくある質問