カラーパレット

色相環とは?意味と使い方

色相環は、色を円形に並べて色同士の関係をひと目でわかるようにした図です。うまくいく色の組み合わせを考えるための基本ツールです。

色相環とは?

色相環(カラーホイール)は、色を円周上に並べた図です。隣り合う色は似ていて、向かい合う色はもっとも異なります。

17世紀にアイザック・ニュートンが初期の色相環のひとつを描きました。それ以来、アーティストやデザイナーが色を理解し、組み合わせるために使ってきました。

主なモデルは2つあります。絵画で使われる伝統的なモデルと、画面で使われるデジタルのモデルです。

伝統的なRYBモデル(絵の具)

学校で習うのがこのモデルです。赤(Red)、黄(Yellow)、青(Blue)の頭文字からRYBと呼ばれます。

伝統的な色相環は全部で12色です。絵画やイラスト、配色の理解に役立ちます。

デジタルのRGBモデル(画面)

画面は光で色を作ります。赤、緑、青の3つの光を混ぜるため、RGBモデルと呼ばれます。

#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色だけ加えましょう。

色相環を使うときのコツ

よくある質問

三原色とは何ですか?

絵の具(RYBモデル)では赤、黄、青です。画面(RGBモデル)では赤、緑、青です。

補色とは何ですか?

青とオレンジのように、色相環で向かい合う色のことです。組み合わせるとコントラストが最大になります。

いちばん使いやすい配色パターンはどれですか?

色同士が似ているため、モノクロマティックと類似色がもっとも簡単です。もう少しコントラストがほしい場合は、スプリット・コンプリメンタリーがおすすめです。

ほかのガイドとツール