カラーホイール（色相環）

カラーホイールの使い方

1. ベースカラーを選びます。ホイール上のマーカーをドラッグするか、HEXコードを入力するか、「ランダム配色」を押してください。
2. マーカーを中心に近づけるほど彩度の低いやわらかい色に、外側に近づけるほど鮮やかな色になります。暗い色にしたいときは明度スライダーを下げます。
3. 配色の種類を選びます。追加のマーカーはベースカラーと一緒に動き、角度は常に一定なので、配色のバランスを崩さずに全体を回転できます。
4. 文字色に使う前に、各スウォッチの下に表示されるコントラスト比を確認しましょう。通常サイズの文字なら4.5:1以上でWCAGのAA基準を満たします。
5. HEXコードを1色ずつコピーするか、パレット全体をまとめてコピーするか、今の状態をそのまま再現できるリンクをコピーします。

カラーホイールで作る配色パターン

配色パターンとは、ホイール上の決まった位置関係のことです。ベースカラーがどこにあっても角度は変わらないので、ブランドカラーや写真、部屋の雰囲気に合うまで回転させても、配色としてのまとまりは保たれます。

RGBとRYB、どちらのカラーホイールを使う？

画面は光を混ぜて色を表示するため、デジタルデザインではRGBの色相環を使います。三原色は赤・緑・青で、反対側の色どうしを合わせると白い光になります。赤の反対はシアン、緑の反対はマゼンタ、青の反対は黄色です。HEXコードやCSS、各種デザインツールはこの考え方で動いていて、Color Wheel & Palettesアプリもこのホイールを使っています。

絵の具は顔料を混ぜるため、美術の授業では昔ながらの赤・黄・青（RYB）の色相環を習います。こちらでは赤の反対が緑、黄色の反対が紫、青の反対がオレンジです。絵画やインテリア、コーディネートの配色を考えるときは、ツールを「絵の具（RYB）」に切り替えてください。授業で習った配色に合うように色相が並び替わり、結果は画面ですぐ使えるHEXコードで表示されます。

どちらが正しいというものではなく、扱う素材が違うだけです。最終的に色を使う場所に合わせて選びましょう。

暖色と寒色、ティント・シェード・トーン

色相環は、温度感でおおよそ半分に分かれます。赤・オレンジ・黄色は暖色で手前に迫って見え、緑・青・紫は寒色で奥に引いて見えます。寒色の中に暖色のアクセントを1つ入れる（またはその逆）と、意図のある配色に見えやすくなります。

ティント・シェード・トーンは、色相を変えずに色の印象を変える方法です。ティントは白を加えた色で、マーカーを中心に寄せるか彩度を下げると作れます。シェードは黒を加えた色で、明度を下げます。トーンはグレーを加えた色で、その両方を同時に行います。同系色の配色を選ぶと、これらの段階を自動で作れます。

Webサイトやアプリに色を使う前には、WCAGコントラストチェックで文字のコントラストを確かめ、パレットの色をなめらかにつなげたいときはグラデーション作成も試してみてください。

カラーホイールの歴史

アイザック・ニュートンは『光学』（1704年）で光のスペクトルを円形に並べ、色を「隣どうし」「反対どうし」として語れるようにしました。その後、画家たちの間では、ヨハネス・イッテンがバウハウスで教えた赤・黄・青の12色相環が定着します。三原色、それを混ぜた三つの二次色、その間に入る六つの三次色からなる色相環です。デジタルツールでは顔料の原色が光の原色に置き換わりましたが、円の上の角度から配色の調和を読み取るという考え方は今も変わりません。