配色ジェネレーター
基準色を1つ選ぶと、補色・類似色・トライアドなど相性のいい配色を一式生成します。色を変えるとその場で更新。各色のHEXはクリックでコピーでき、選んだ色は外に出ません。
例（クリックで試す）
各色をクリックするとHEXをコピーします。基準色を変えると全配色がその場で更新されます。
配色ジェネレーターの使い方
カラーピッカーで基準色を選ぶか、コード欄に #hex / rgb() / hsl() のいずれかを入力します。色相環をもとに、相性のよい配色（カラースキーム）が一式生成されます。気に入った色をクリックするとHEXがコピーされ、そのままCSSやデザインツールに貼れます。
例：1色から配色を起こす
基準色に #ea6379（ローズ）を選ぶと、たとえば次のような色が得られます。
- 基準色：
#ea6379 - → 補色（正反対の色）：
#62ead3 - → 類似色（隣り合う色）：
#ea62bc/#ea8f62 - → トライアド（3等分）：
#79ea62/#6279ea
基準色をメインに、補色をアクセント（ボタンやリンク）に、類似色や単色トーンを背景・補助色に割り当てると、まとまりのある画面になります。
配色の種類
- 補色（Complementary）：色相環で正反対（180度）。コントラストが強く、目を引くアクセントに。
- 類似色（Analogous）：隣り合う色（±30度）。穏やかでまとまりのある配色に。
- トライアド（Triadic）：色相環を3等分（120度ずつ）。鮮やかでバランスのよい3色。
- 分裂補色（Split Complementary）：補色の両隣（150度・210度）。補色よりやわらかいコントラスト。
- テトラード（Tetradic）：90度ずつの4色。情報量が多い画面のカラーリングに。
- 単色トーン（Monochromatic）：同じ色相で明度違い。陰影や濃淡をつけたいときに。
よくある質問
選んだ色はサーバーに送信されますか？
いいえ。配色の計算はすべてお使いのブラウザ内で完結し、選んだ色や生成した配色が外部に送信・保存されることはありません。安心してご利用いただけます。
補色・類似色とは何ですか？
色相環で正反対（180度）にある色が補色で、組み合わせるとコントラストが強くアクセントになります。隣り合う（±30度）色が類似色で、まとまりのある落ち着いた配色になります。トライアドは色相環を3等分（120度ずつ）した、バランスの良い3色の組み合わせです。
生成した配色はどう使えばいいですか？
基準色をブランド色やメインカラーに、補色をボタンやリンクなどのアクセントに、類似色や単色トーンを背景・補助色に割り当てると整います。各色のHEXはクリックでコピーでき、そのままCSSやデザインツールに貼り付けられます。