ベースカラーを1色選ぶだけで、補色・類似色・トライアドなど配色理論にもとづいたカラーパレットを自動生成できる無料ツールです。各色のHEX・RGB・HSLコードのコピー、CSS変数（:root）の一括出力、白黒テキストとのコントラスト判定に対応しています。
このツールは …回 使われています。
配色パターンの種類と選び方
配色は「色相環（しきそうかん）」上での色の位置関係でパターン化できます。ベースカラーからどの角度の色を組み合わせるかで、印象が大きく変わります。
類似色（アナロガス）
色相環で隣り合う色を組み合わせる配色。まとまりがあり、落ち着いた自然な印象になります。迷ったらまずこれ。
補色（コンプリメンタリー）
色相環で正反対（180度）にある色の組み合わせ。コントラストが強く、目立たせたいアクセントに向きます。
トライアド
色相環を3等分（120度ずつ）した3色。バランスがよく、ポップで華やかな配色を作れます。
分裂補色（スプリットコンプリメンタリー）
補色の両隣を使う配色。補色ほど強すぎず、コントラストと調和のバランスがとれます。
テトラード
色相環上の4色（長方形）を使う配色。色数が多くにぎやかですが、1色をメインにするとまとまります。
モノクロマティック
同じ色相で明るさだけを変えた配色。統一感が最も高く、シンプルで上品な仕上がりになります。
使い方ガイド
- 1. ベースカラーを決める
- 左のカラーパレット（丸いボタン）から色を選ぶか、HEXコードを直接入力します。「ランダム」ボタンで色を提案させることもできます。
- 2. 配色パターンを選ぶ
- 「類似色」「補色」などのボタンを押すと、その配色理論にもとづいた5色のパレットが自動生成されます。
- 3. コードをコピーする
- 各色をクリックすると、選択中の形式（HEX / RGB / HSL）でコードがコピーされます。「CSS変数をまとめてコピー」で
:rootの変数定義を一括取得できます。 - 4. コントラストを確認する
- 各色に重なった「Aa」の見え方と、白・黒どちらの文字が読みやすいか（コントラスト比）を表示します。文字色を決める目安に使えます。
よくある質問
配色の決め方がわかりません。何から選べばいいですか？
まずメインにしたい色を1色決め、「類似色」か「トライアド」を試すのがおすすめです。全体をまとめたいなら類似色やモノクロ、目立たせたい部分があるなら補色を組み合わせます。
補色とは何ですか？
色相環（赤・黄・緑・青…を円に並べたもの）で、正反対の位置にある色どうしのことです。たとえば青の補色はオレンジ。互いを引き立て合うため、アクセントカラーに向いています。
生成したパレットはWebサイトやCSSにそのまま使えますか？
使えます。「CSS変数をまとめてコピー」を押すと :root { --color-1: #…; } の形式でコピーできるので、CSSに貼り付けてそのまま利用できます。HEX・RGB・HSLの個別コピーにも対応しています。
文字が読みやすいかどうかはどう判断すればいいですか？
各色に表示されるコントラスト比（例: 4.5:1）が目安です。本文では 4.5:1 以上（AA基準）、大きな文字では 3:1 以上が読みやすいとされています。より詳しくは配色コントラストチェッカーで確認できます。