配色の鍵はすべて「色相環」にある
ここで生成する配色は、すべて1つの考え方に基づいています。色相環を決まった角度だけ回し、たどり着いた色を取り出す——ただそれだけです。色相環とは、HSLの色相（H）を円にしたもので、0〜360度の範囲を持ちます。赤がおよそ0度、緑が120度付近、青が240度付近にあり、そこから一周して戻ります。
ベースカラーを選ぶと、本ツールは彩度と輝度をおおむね保ったまま色相だけを回転させます。結果がバラバラではなく「家族」のようにまとまって見えるのはこのためで、同じ調子を共有しつつ、色相環上の位置だけが異なります。
各配色タイプの得意分野
「これが一番」という配色はありません。それぞれが調和とコントラストを別々の形で両立させています。ざっくりした考え方は次のとおりです。
- 補色（180度反対）は最も強いコントラストを生みます。周囲から際立たせたいボタンなどに向きますが、両色を同量使うとやや騒がしくなります。
- 類似色（隣り合う約30度）は穏やかで自然な印象です。オレンジからピンクへ移ろう夕焼けのようなイメージで、背景や落ち着いたまとまりのあるレイアウトに向きます。
- トライアド（120度間隔の3色）はバランスがよく遊び心があります。1色を主役にし、残り2色を脇役にすると散らかりません。
- スプリットは、補色の両隣の色を使うことで補色の衝突をやわらげます。コントラストを保ちつつ、きつさを抑えられます。
- テトラード（補色のペア2組＝4色）は豊かですが扱いは難しめです。1色を主役にし、残りをアクセントにすると映えます。
- モノクロは色相を1つに固定し、明度と彩度だけを変えます。単色で清潔感のある見た目にしたいときに最も安全な選択です。
使えるベースカラーの選び方
ベースカラーは、その上に組み立てられるすべての色の方向性を決めます。だからこそ意図を持って選ぶ価値があります。極端に暗い／淡いベースは、明暗のバリエーションを派生させる余地が少ないため、中程度の明るさで適度に彩度のある色のほうが柔軟な結果になりやすいです。
すでにブランドカラーがあるなら、そのHEXコードをベースに貼り付けて色相環に任せましょう。なんとなく近い色を当てずっぽうで選ぶのではなく、出発点と数学的に関連したアクセント色・補助色が得られます。
配色を実際に使えるコードに落とし込む
配色はプロジェクトに組み込んで初めて役に立ちます。「CSS変数をコピー」ボタンで一式をカスタムプロパティとして取得し、スタイル全体で名前参照しましょう。色を見た目（--blue）ではなく役割（--surface、--accent）で名付けておくと、「青をやめて青緑にする」と決めた日のつらいリネームを避けられます。
配色をCSSの先頭の一箇所にまとめておくと、後からのダークモードやテーマ切り替えもぐっとラクになります。各所のべた書きを探し回らず、変数の値を差し替えるだけで済むからです。
コントラストを忘れずに
配色が美しくても、読めなければ意味がありません。色相環で近い位置にある2色は明度も近いことが多く、一方を背景・もう一方を文字にすると読みづらくなりがちです。
確定する前に、配色から「文字色と背景色」の組み合わせを取り出し、コントラスト比チェッカーでアクセシビリティ基準を満たすか確認しましょう。「読めない」と指摘されてから作り直すより、いま色を調整するほうがずっと安く済みます。