ロジカル色彩シリーズ

色の組み合わせ(3色)を作る法則【りよのロジカル色彩】

りよ
こんにちは!りよです。
本日はりよと色彩の第2弾をお届けします!

前回ご好評いただいた「色の組み合わせで印象を操る!法則を知れば誰でもできる配色技【りよと色彩①】」の記事に続き、第2弾です!

今回の記事では、前回お話した色の要素(色相・明度・彩度・清濁)に触れながらお話しますので、色の要素の概念がわからない方は、先に↓の【りよと色彩①】に目を通してくださいね!

 

色の組み合わせで『印象』を操る法則【りよのロジカル色彩】

続きを見る

りよのロジカル色彩シリーズを全部見る

 

はじめに

今回は3色の色の組み合わせを作るということがテーマです。

もちろん、理論・法則を知れば誰でもできるように公式化しているので、ぜひ最後まで読んでみてくださいね!

今回紹介する3色の組み合わせ法則を用いるためには、「トーン」の概念を知っておく必要があります。まずはそこからお話させてください。

 

トーンについて

トーンとは?

トーンというのは、明度・彩度・清濁のレベルが近いグループのことを言います。


日本色研事業株式会社 PCCS>PCCSのトーン

 

これは日本色研のPCCSという配色体系に置ける考え方で、図中のビビット、ブライト、ペールなどはトーン名です。各トーンそれぞれに赤・橙・黄色・・・と全ての色相が含まれています。

ここで覚えておいて欲しい感覚は「同じトーンで違う色相=色の要素の中で色相だけが異なっている」という感覚です。(同一トーンであるということは明度・彩度・清濁のレベルが近いということなので)

厳密には同じトーンでも明度・彩度に違いはあります。

 

トーンを利用した配色

トーンを利用した配色の中から今回ぜひ覚えて欲しいのはこの2つ。トーンオントーントーンイントーンです。

トーンオントーン・・・色相が一緒でトーンが違う

トーンイントーン・・・トーンが一緒で色相が違う

 

1のトーンオントーンは同じ色相をトーン違いで組み合わせます。

この場合は青の色相を、ディープトーンとライトトーンで組み合わせています。

 

一方2のトーンイントーンは、同じトーンを色相違いで組み合わせます。

この場合は同じライト(またはブライト)トーンで揃え、色相は青と緑で組み合わせています。

 

他にも配色方法を知りたい方はこちら!

色の組み合わせの法則(2色編)【りよのロジカル色彩】

続きを見る

 

【本題!】3色の組み合わせ方

まず3色の割合を知る

色の組み合わせを考えるときには、このようにそれぞれの役割を明確にすると作りやすいです。

3色の組み合わせの場合、それぞれの色の面積の割合を「ベース:サブ:アクセント=6:3:1」にすると配色にまとまりと締まりが出ます。

  1. ベースカラー(割合:6)
  2. サブカラー(割合:3)
  3. アクセントカラー(割合:1)

 

3色の組み合わせの法則

さて、そろそろ前置きは終了です。ズバリ3色組み合わせの法則をお伝えします!

 

3色配色の公式

  1. ベースとサブはトーンオントーントーンイントーン配色にする。
  2. ベースとサブをトーンオントーン配色にしたなら、アクセントカラーは色彩差が大きい色を選ぶ。
  3. ベースとサブをトーンイントーン配色にしたなら、アクセントカラーはトーン差が大きい色を選ぶ。

 

言葉にすると、わかるようなわからないような微妙な感じなので、次の章で例を出しながら解説していきますね。

 

3色配色の例

■当サイトの例

じゃん!これは、みつりよスキルアップのイメージカラーを3色配色のテンプレートに落としてみたものです。

ベースとサブは色相が同じで「トーンオントーン配色」です。トーンオントーン配色の場合アクセントカラーは、色相でメリハリをつけたいので、青緑にはっきり映える黄色をチョイスしました。

 


■例2

こちらはベースとサブが、ライト(またはペール)トーンで統一されている、トーンイントーン配色です。

その場合、アクセントカラーはトーン差をつけるのが定石。ネイビーとホワイトを選んでみましたが、ネイビーの方がトーン差が大きいのでより引き締まる印象ですね。白でもトーン差はありますが、ネイビーに比べればふんわりした印象になります。

 


■例3

そろそろイメージが掴めたのではないでしょうか?

これは、ベースとサブが再度の高いトーンイントーン配色。アクセントカラーを思い切って無彩色にし、トーン差の中でも断トツに彩度差が大きいカラーをチョイスしました。

無彩色・・・白、グレー、黒の色味を持たない色のこと。無彩色以外の色味を持つ色全てを有彩色と言います。

 


■例4

では最後!こちらのベースとサブは、何配色でしょうか?

・・・・

・・・・

・・・・

答えはトーンオントーン配色!よってアクセントカラーは、色彩差をつけて選ぶことが大切です。

とはいえ、今回の例はベースとサブが無彩色なので、色は有彩色であれば何色を使っても問題ないです。アクセントカラーを自由に選べる分、かなり自由度高く印象を操れる組み合わせになっています♪

 

まとめ

今回は、トーンやトーンにまつわる配色を前知識に、誰でもできる3色配色の公式をお伝えしました!

要点まとめ

  1. トーンは色相以外の色の要素(明度・彩度・清濁)のレベルが近いグループ
  2. トーンオントーンは色相が同じでトーンが違う。トーンイントーンはその逆。
  3. 色の面積は「ベース:サブ:アクセント=6:3:1」を目安に。
  4. ベースとサブはトーンオントーンかトーンイントーン配色する。
  5. ベースとサブがトーンオントーンなら色相差を、トーンイントーンならトーン差のあるアクセントを。

 

今はどのソフトでも↓以下のように、トーン(上のプレート)と色相(下の帯)を別々に調整できるようになっているので、この技はみなさん実践しやすいです。

 

また、今回の技に前回の記事「印象を操る」技も一緒に使えば、心に響く配色を作り出すことも可能ですので、ぜひ色々試してみてくださいね♪

りよ
自分だけの配色サンプルなどを作って集めていくと、楽しく配色力をあげられますよ♪

 

色を学ぶ

色彩検定2級3級パックコース

たのまな 公式サイト

1回の受験でW合格が目指せる!

 

【3万円以上割引】デジタルハリウッド経由でAdobeをお得に買う方法

続きを見る

【色が好きな人へ】色彩スキルを活用したお仕事一覧。

続きを見る

色彩検定、いきなり2級から受けられる?飛び級するなら知っておきたいこと

続きを見る

【厳選4校】WEBデザイナーを目指す人におすすめのプログラミングスクール

続きを見る

-ロジカル色彩シリーズ
-, ,

Copyright© LIYO MEMO リヨメモ , 2020 All Rights Reserved.