配色パレットジェネレーター（補色・類似色・トライアド）
基準色を1色選ぶだけで、補色・類似色・トライアド・分裂補色・テトラード・スクエア・モノクロマティックの配色を作れます。色のHEXコードはクリックでコピーでき、パレット全体をCSS変数やJSONとして書き出せます。ブラウザ内で処理され、サーバーには送信されません。色の形式変換は カラーコード変換、色の組み合わせの見やすさは コントラスト比チェッカー で確認できます。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
パレット
使い方
- カラーピッカーかHEX欄で基準色を決めます。
- 配色の種類（補色・トライアドなど）を選びます。
- 表示された色をクリックしてHEXをコピー、またはCSS変数・JSONをまとめてコピーします。
注意事項
- 配色はHSL色空間で色相を回転させて計算しています。見た目の明るさは色によって異なるため、実際の使用前にコントラストを確認してください。
- 類似色は基準色の前後30度、モノクロマティックは基準色の色相・彩度のまま明度を5段階に変えた色です。
- 彩度のないグレー系の色では、色相を回転しても同じ色になります。
用語解説
補色
色相環で正反対（180度）に位置する色の組み合わせです。強いコントラストを生みます。
類似色
色相環で隣り合う色の組み合わせです。まとまりがあり穏やかな印象になります。
トライアド
色相環を3等分（120度ずつ）した3色の組み合わせです。バランスよく華やかになります。
分裂補色
基準色と、その補色の両隣（150度・210度）の色を組み合わせた配色です。補色より穏やかなコントラストになります。
テトラード / スクエア
テトラードは色相環上の長方形（0・60・180・240度）、スクエアは正方形（0・90・180・270度）を成す4色の配色です。
よくある質問
補色・類似色・トライアドの違いは何ですか？
補色は色相環の正反対（180度）、類似色は隣り合う色（±30度）、トライアドは120度ずつ離れた3色です。コントラストを強めたいなら補色、まとまりを重視するなら類似色が向いています。
生成したパレットはどのように使えますか？
各色をクリックするとHEXコードをコピーできます。CSS変数（:root { --color-1: … }）やJSONでまとめて書き出せるので、スタイルシートやデザイントークンにそのまま貼り付けられます。
モノクロマティックはどう計算されますか？
基準色の色相と彩度を保ったまま、HSLの明度を20・35・50・65・80%の5段階に変えた色を作ります。基準色の明度が違っても、同じ5段階になります。
グレーを基準色にすると全部同じ色になるのはなぜですか？
グレーは彩度が0で色相を持たないため、色相を回転しても結果が変わりません。彩度のある色を基準色にしてください。
このページをシェア