色相環とは?
色相環(カラーホイール)は、色を円周上に並べた図です。隣り合う色は似ていて、向かい合う色はもっとも異なります。
17世紀にアイザック・ニュートンが初期の色相環のひとつを描きました。それ以来、アーティストやデザイナーが色を理解し、組み合わせるために使ってきました。
主なモデルは2つあります。絵画で使われる伝統的なモデルと、画面で使われるデジタルのモデルです。
伝統的なRYBモデル(絵の具)
学校で習うのがこのモデルです。赤(Red)、黄(Yellow)、青(Blue)の頭文字からRYBと呼ばれます。
- 一次色(原色):赤、黄、青。ほかの色を混ぜて作ることはできません。
- 二次色:オレンジ(赤+黄)、緑(黄+青)、紫(青+赤)。
- 三次色:一次色と隣の二次色を混ぜた色です。赤みのオレンジ、黄みのオレンジ、黄緑、青緑、青紫、赤紫の6色です。
伝統的な色相環は全部で12色です。絵画やイラスト、配色の理解に役立ちます。
デジタルのRGBモデル(画面)
画面は光で色を作ります。赤、緑、青の3つの光を混ぜるため、RGBモデルと呼ばれます。
- 一次色:赤、緑、青。
- 二次色:黄(赤+緑)、シアン(緑+青)、マゼンタ(青+赤)。
- 3つの光をすべて最大にすると白になり、光がないと黒になります。
#FF0000のような16進数カラーコード(HEX)は、RGBの色を表しています。そのため、ウェブやアプリのデザインでは標準になっています。
印刷では、シアン、マゼンタ、イエロー、ブラックからなる別のモデル、CMYKが使われます。印刷会社が使うのはこのモデルです。
実際には、どちらのモデルでも配色の考え方はほぼ同じです。違うのは、ある色の反対側にどの色が来るかです。たとえば、RYBでは赤の補色は緑ですが、RGBではシアンになります。
暖色と寒色
色相環を半分に分けると、2つのグループができます。
- 暖色:赤、オレンジ、黄色。エネルギー、親しみ、動きを感じさせ、手前に迫ってくるように見えます。
- 寒色:緑、青、紫。落ち着き、距離感、秩序を感じさせ、奥に引っ込んで見えます。
同じ色の中にも温度感があります。青みを帯びたクールな赤もあれば、茶色みを帯びた暖かいグレーもあります。
便利なコツ:背景や広い面には寒色を、目立たせたい部分には暖色を使いましょう。
配色パターン(カラーハーモニー)
配色パターンは、色相環上の位置関係にもとづいた色の組み合わせです。バランスの良いパレットを作る近道になります。配色ツールで実際に試してみましょう。
補色
色相環で向かい合う2色です。たとえば青とオレンジ。
コントラストが最大になるため、ボタンや価格、見出しを目立たせるのに最適です。
使い方:同じ分量で使わず、片方をメインカラー、もう片方をアクセントにしましょう。鮮やかな補色の上に文字を置くと、ちらついて目が疲れるので避けます。
類似色
色相環で隣り合う3色です。たとえば黄色、黄みのオレンジ、オレンジ。
落ち着いた自然な組み合わせになります。夕焼けや森など、自然界でもよく見られる配色です。
使い方:メインカラーとサブカラーを決め、3色目はディテールに使います。コントラストが弱くならないよう、ニュートラルカラーを加えましょう。
トライアド
色相環上で等間隔に並び、三角形を作る3色です。たとえば赤、黄色、青。
にぎやかでバランスの良いパレットになります。子ども向けのデザイン、ゲーム、明るいブランドで人気です。
使い方:1色をメインにして、残りの2色は少なめに使います。強すぎると感じたら、1〜2色の彩度を下げましょう。
スプリット・コンプリメンタリー
ある色を選び、その正反対の色ではなく、反対色の両隣にある2色を使う配色です。たとえば青に、赤みのオレンジと黄みのオレンジを合わせます。
十分なコントラストがありながら、補色ほど緊張感が強くありません。最初に試すのに向いている配色です。
使い方:ベースの色をデザインの大部分に使い、残りの2色をアクセントにします。
テトラード
色相環上で長方形または正方形を作る4色です。2組の補色を組み合わせたものと同じです。たとえば青、オレンジ、緑、赤。
もっとも色数が多く豊かな配色ですが、バランスを取るのがいちばん難しい配色でもあります。
使い方:メインカラー1色、サブカラー1色、アクセント2色にします。暖色と寒色を慎重に組み合わせ、ニュートラルカラーを活用しましょう。
モノクロマティック(単色配色)
1つの色を、明るさや彩度を変えて使う配色です。たとえばのような、さまざまな青の濃淡です。
上品で統一感があり、取り入れやすい配色です。企業のウェブサイトやアプリの画面で広く使われています。
使い方:もっとも暗い色を文字に、中間の色を重要な要素に、明るい色を背景に使います。何かを目立たせたいときは、アクセントカラーを1色だけ加えましょう。
色相環を使うときのコツ
- 配色パターンから始めて、あとで調整しましょう。厳密に従う必要はありません。
- 強すぎる組み合わせは、明るさや彩度を調整してやわらげます。
- 白、黒、グレー、ベージュなどのニュートラルカラーを必ず加えましょう。
- どの背景の上でも文字が読みやすいか確認しましょう。