色相環とは何か（What）
色相環は、色相（Hue）を円周上に並べた図です。色の「隣り合い」「向かい合い」を一目で比較できます。印刷・UI・イラストの配色議論では、ほぼ必ず登場します。
| 位置の関係 | 呼び方 | イメージ |
|---|---|---|
| 隣り合う | 類似色（アナロガス） | 黄 → 黄緑 → 緑のように連続 |
| 正反対（180°） | 補色（コンプリメンタリー） | 赤と青緑、黄と紫 など |
| 120° ずつ | 三角配色（トライアド） | バランスの取れた3色組 |
なぜ色相環を使うか（Why）
「この青に合う色は？」と聞かれたとき、感覚だけでは説明が難しくなります。色相環は 関係性を共有する地図 なので、
- デザイナーとクライアントが 同じ図 を見ながら話せる
- 補色・類似色などの 用語 がずれにくい
ただし、環の形や色名は文化・ソフトウェアで微妙に違います。絶対的な正解表 ではなく、共通言語 と捉えてください。
どう使うか（How）
このアプリの6色を環で見る
触ってみる — 色相環
示す: 色相環上の位置関係と、補色・類似色・三角配色の目安
示さない: 6色だけが存在する世界（環は連続した色相の地図です）
ヘッダーのテーマ色とは連動しません（レッスン内だけの操作です）。
下の6色は Colorism の学習パレットです。押すと環上の対応位置に移り、その色を基準に補色・類似色などを表示します（ヘッダーのテーマ色とは別です）。
選択: 赤 #EA4335
- 補色（180°） #34dbea
- 類似色（+30°） #ea9e34
- 類似色（−30°） #ea3480
- 三角配色（+120°） #34ea43
- 三角配色（+240°） #4334ea
この色でパレットを試す環で選んだ #EA4335 を基準に生成（ヘッダーのテーマ色は変わりません）
Colorism の 6 色は、簡略化した色相環の 目印 です。細かい色は省き、次のレッスンで扱う「補色」「類似色」を 6色の名前で議論 しやすくしています。
たとえ: ヘッダーで「青」を選び、環上の青付近を確認してから 補色配色 に進むと、180°の関係が体感しやすくなります。
たとえ: ランディングページのヒーローで、背景に類似色のグラデ、CTA に補色系のアクセントを置く — といった議論でも、まず環で位置関係を決めます。
配色名称の識別ドリルへ3級 — 補色・類似色など配色名称の識別を反復
ミニクイズ
色相環上で、ある色と「正反対」にある関係を何と呼びますか？