カラーパレット生成ツール
1つのベースカラーから補色、類似色、トライアド、スプリットコンプリメンタリー、単色配色のパレットを生成し、HSLの計算も自動で行います。
使い方
このカラーパレット生成ツールは、1つのベースカラーから補色、類似色、トライアド、スプリットコンプリメンタリー、単色配色という5種類のパレットを瞬時に作成します。HSLを手計算せずに、調和の取れた配色を試せます。
- ベースカラーを設定してください
HEXコードを入力するか、カラーピッカーで色を選ぶか、「ランダムカラー」をクリックしてください。
- パレットを生成してください
5種類の配色パターンが、それぞれ5つの色見本を並べた行として表示されます。
- 必要なものをコピーしてください
スウォッチをクリックするとHEX値を取得でき、すべてをCSS変数としてコピーすることもできます。
5種類の配色パターン
各パレットはベースカラーをHSL（色相、彩度、明度）に変換し、カラーホイール上で色相を固定量シフトさせることで構築されます。
- 補色: ベースカラーの真反対、180度の位置にある色相で、最大のコントラストを生み出します。
- 類似色: ベースカラーの左右15度と30度にある色相を使い、落ち着いた統一感のある配色になります。
- トライアド: 120度間隔で配置された3つの色相による、均整の取れた鮮やかな組み合わせです。
- スプリットコンプリメンタリー: 補色の両隣、150度および210度の位置にある2つの色相で、緊張感を抑えつつ補色に近いコントラストを得られます。
- 単色配色: 同じ色相の明度を5段階に変えた配色で、失敗しにくく統一感のある組み合わせです。
CSSでのパレット使用
16進数値をコピーしてカスタムプロパティとして定義し、スタイルシート全体で参照してください。
--color-primary: #14b8a6; --color-accent: #b84e14;
HSLは知覚的に均一ではありません。
これらのパレットは純粋にHSLの計算で生成されており、OKLCHやCIELABのような色空間とは異なり、知覚的な均一性は考慮されていません。同じHSL明度の2色でも明るさが明らかに異なって見えることがあるため、UIパレットを確定する前に専用のアクセシビリティチェッカーでコントラスト比を確認してください。
よくある質問
1つの16進数カラーコードからカラーパレットを生成するにはどうすればよいですか？
ベースカラー欄に16進数カラーコード（例：#14b8a6）を入力し、「パレット生成」をクリックしてください。ツールがその色をHSLに変換し、補色、類似色、トライアド、スプリットコンプリメンタリー、単色配色の5種類のパレットを計算します。それぞれ5つの色見本を並べた行として表示されます。色見本をクリックすると、そのHEXコードをクリップボードにコピーできます。
補色とスプリットコンプリメンタリーのカラーパレットの違いは何ですか?
補色パレットは、ベースとなる色相と色相環上で真反対(180度)にある色を組み合わせることで最大のコントラストを生み出します。スプリットコンプリメンタリーパレットは、その反対点の隣にある2つの色相(150度と210度)を使用するため、同様に鮮やかでありながら少し柔らかいコントラストとなり、UIデザインでのバランス調整が容易になります。
生成したパレットをCSSで使用するにはどうすればよいですか?
色見本のHEXコードをコピーし、CSSカスタムプロパティとして定義してください（例：--color-primary: #14b8a6; --color-accent: #b84e14;）。スタイルシート内ではvar(--color-primary)のように参照できます。「全5パレットをCSS変数としてコピー」ボタンを押すと、5種類のパレットの全色が一度にコピーされ、:rootブロックに貼り付けられます。
ランダムな色を起点にパレットのインスピレーションを得ることはできますか？
はい。「ランダムカラー」ボタンをクリックすると、ランダムな16進値が生成され、そこから5つのパレットが即座に計算されます。ベースカラーが決まっていない状態でブランドカラーを検討する際に便利です。
ブラウザベースのパレット生成にはどのような制限がありますか？
パレットの計算は純粋にHSLの数式に基づいており、OKLCHやCIELABのような知覚的な均等性は考慮されません。HSLの明度が同じでも視覚的な明るさが異なることがあるため、UIパレットを確定する前は専用のアクセシビリティチェックツールでコントラスト比を確認してください。