40通りの3色配色パターン:デザインのテイスト別にベストな色の組み合わせを探せます

デザインの基礎
  • 3色だけで構成された配色パターンを知りたい
  • 本当に3色だけでデザインが成立するのか不安
  • 3色を配色するコツを知りたい

そういった方に向けて今回は3色の配色パターン40個をテイスト別に掲載しています。
デザインに配色を反映させているのでイメージが湧きやすいかと思います。

もし「デザインの途中で3色が決められなくて困ってる」という人は掲載のカラーコードを参考にしてみてくださいね。

3色の配色パターン40選

配色パターンをテイストごとに掲載しています。

配色を反映したデザインと#から始まるカラーコードも記載してるので参考にしてみてください。

ナチュラル系

まずは自然でやわらかい色の組み合わせを紹介します。

女性向けのデザインに合うかと思います。

1

大見出し1
 
大見出し1
 

#DEBCA4 #727186 #5A5733
 

2

大見出し1
 
大見出し1
 

#dee2d1 #6abe83 #f1ac9d
 

3

大見出し1
 
大見出し1
 

#e2f2d5 #f9fbba #f6c2c2
 

4

大見出し1
 
大見出し1
 

#e4d1d3 #1687a7 #014955
 

5

大見出し1
 
大見出し1
 

#fdc4b6 #e59572 #2694ab
 

6

大見出し1
 
大見出し1

#fae3d9 #ffb6b9 #8ac6d1
 

7

大見出し1
 
大見出し1
 

#f4f0e6 #9dd3a8 #d9d9f3
 

8

大見出し1
 
大見出し1
 

#ecd6c7 #e79686 #a39391
 

9

大見出し1
 
大見出し1
 

#f8f2da #ddecef #c7afbd
 

10

大見出し1
 
大見出し1
 

#fffadf #8f9435 #585d37
 

ポップ系

次はカラフルで鮮やかな色の組み合わせです。

明るい印象を与えたいときにどうそ。

1

大見出し1
 
大見出し1
 

#eaffd0 #fce38a #95e1d3
 

2

大見出し1
 
大見出し1
 

#9fd9d0 #3aa7a0 #f7c9c0
 

3

大見出し1
 
大見出し1
 

#f4efdb #5ad0e8 #ff424e
 

4

大見出し1
 
大見出し1
 

#82aff9 #9881f5 #f97d81
 

5

大見出し1
 
大見出し1
 

#c4d4af #68a8ad #737495
 

6

大見出し1
 
大見出し1
 

#fad3cf #a696c8 #2470a0
 

7

大見出し1
 
大見出し1
 

#fdfdeb #f9ce00 #09194f
 

8

大見出し1
 
大見出し1
 

#eaeaea #08d9d6 #ff2e63
 

9

大見出し1
 
大見出し1
 

#fff1c1 #fe5f55 #293462
 

10

大見出し1
 
大見出し1
 

#bd97cb 5e376d #f3eac0
 

スタイリッシュ系

シンプルでモダンな色の組み合わせです。

資料やパンフレットなどにも使える配色です。

1

大見出し1
 
大見出し1
 

#fff7f7 #dadada #204969
 

2

大見出し1
 
大見出し1
 

#eeeeee #393e46 #fd7013
 

3

大見出し1
 
大見出し1
 

#eae3e3 #20366b #2d095c
 

4

大見出し1
 
大見出し1
 

#ffffff #260033 #1f640a
 

5

大見出し1
 
大見出し1
 

#d0dfe6 #1794a5 #032030
 

6

大見出し1
 
大見出し1
 

#dcdede #79a2a6 #a4bf5b
 

7

大見出し1
 
大見出し1
 

#1f192b #4e706a #eec7bb
 

8

大見出し1
 
大見出し1
 

#c8c8c0 #7d6e70 #ac5850
 

9

大見出し1
 
大見出し1
 

#e1dbd0 #4f3750 #676b40
 

10

大見出し1
 
大見出し1
 

#ffffff #333366 #ff9933
 

エレガント系

続いては華やかな色の組み合わせです。

メッセージカードや招待状などに合うかと思います。

1

大見出し1
 
大見出し1
 

#d1bfa7 #8e8e90 #bd8c7d
 

2

大見出し1
 
大見出し1
 

#efefef #c04d00 #ec7700
 

3

大見出し1
 
大見出し1
 

#cc9900 #cc6600 #663300
 

4

大見出し1
 
大見出し1
 

#ffffff #424242 #8a0651
 

5

大見出し1
 
大見出し1
 

#eadab0 #c8a569 #af4324
 

6

大見出し1
 
大見出し1
 

#ffb4a2 #b5838d #6d6875
 

7

大見出し1
 
大見出し1
 

#e8e1e4 #d9ad9a #29000a
 

8

大見出し1
 
大見出し1
 

#b18743 #f4edeb #274459
 

9

大見出し1
 
大見出し1
 

#fbede0 #d0ab99 #d4bbdd
 

10

大見出し1
 
大見出し1
 

#efd3e7 #d693bd #9c0063
 

美しく見える配色比率

お好みの3色が見つかったらこの比率で配色します。
大見出し1
 
最も美しく見える比率と言われています。

配色比率が悪い

大見出し1
 
ピンクの分量が多すぎてアクセントになってません。

配色比率が良い

大見出し1
 

厳密でなくてもいいので意識してみましょう。

まとめ

たった3色といってもデザインは十分に成立するし、使う面積次第でデザインの印象は大きく変わります。

もしおしゃれな3色のデザインをもっと見たいという人はこちらの本がおすすめです。
 

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色

 
90パターン以上の3色の配色が掲載されており、マネするだけでおしゃれなデザインができあがります。

この1冊があれば配色に迷うことはまずないでしょう。

なお配色のコツについてまとめた記事もありますので、ぜひご覧になってみてください。

デザインでの配色のコツ5選|NG行為とともにデザインテイスト別のアイディアもご紹介