LITERALLY

知っておくと楽しい知識をまとめて紹介

コピペで使えるおすすめの配色パターン見本集 25 (全組み合わせWebカラーコード付)

f:id:tsukuruiroiro:20161026151310j:plain

今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。

▼ 目次

 

カラフルな配色パターン 

1. 淡い「カラフル」

f:id:tsukuruiroiro:20161031132141j:plain

  • #FF7D7D
  • #FFD580
  • #B3E2B4
  • #ABE7FF
  • #B8B2EA
  • #DBDBDB

淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。

 

2. 力強い「カラフル」

f:id:tsukuruiroiro:20161031132144j:plain

  • #FF6969
  • #F9BF4B
  • #44D37E
  • #6EC4FF
  • #9573FF
  • #5D5D5E

鮮やかな色を選ぶ場合はこちら。透明感はないが「力強く」「元気」な表現ができる。

 

3. 落ち着きのある「カラフル」

f:id:tsukuruiroiro:20161031132146j:plain

  • #E1E3E4
  • #DF907C
  • #ECD070
  • #83BAD6
  • #4DADA1
  • □ WHITE
  • (■ BLACK)

うすいグレーの背景に、暖色、寒色を2色ずつ合わせた少し暗めのカラフル配色。どの色もそれなりに色が濃いので、文字は白抜きをするとオシャレになる。カラフルなカラーは主役ではなく、アクセント的に一部に使うと効果的。

 

4. ソフトタッチのナチュラル

f:id:tsukuruiroiro:20161031132150j:plain

  • #FEF37F
  • #B0DCEE
  • #BCEF82

清潔感があり、やわらかいカラフルな配色。白の背景に合わせて使いたい。

 

オレンジ系の配色パターン

5. 温かみのある「橙」

f:id:tsukuruiroiro:20161031132151j:plain

  • #F99273
  • #FFC776
  • #FFD6CC
  • #E5E0DF
  • □ WHITE

温かみを表現するのにピッタリな橙系の配色。「親近感」「秋らしさ」「温かさ」を表現したいときに使いたい。

 

6. ヘルシーさを表現する「橙」×「緑」

f:id:tsukuruiroiro:20161031132158j:plain

  • #FFECB9
  • #61C359
  • #FCAA00
  • □ WHITE

健康的に見える「ベージュ」×「黄緑」×「あざやかな橙」の配色。料理や食材がテーマのときに使いたい。

 

7. 元気な印象を与える「橙」

f:id:tsukuruiroiro:20161031132145j:plain

  • #FBFBF0
  • #F8C758
  • #EB5D00
  • #B7B3B2
  • □ WHITE

元気で明るい印象を与える組み合わせ。水色は差し色としてほんの一部に使うようにしたい。

 

8. 力強い「橙」

f:id:tsukuruiroiro:20161031132152j:plain

  • #2D2D2D
  • #FF5917
  • #F9D46B
  • □ WHITE

キツめのオレンジは、黒と合わせて使うことで引き締まって見せることができる。この配色を使うときは、力強い太めのゴシックフォントがマッチする。

 

青系の配色パターン

9. ファンシーなオシャレさ「水色」×「赤」

f:id:tsukuruiroiro:20161031132143j:plain

  • #B4DAED
  • #EEF9FF
  • #FC9D9D
  • #5B5B5B

白に近い色を選んだ幻想的な配色。優しく親近感があり、トレンドの配色でもあると思う。思い切って背景に濃い水色を使うことで、オシャレでインパクトのあるデザインになるはず。

 

10. 少しレトロな落ちついた「青」

f:id:tsukuruiroiro:20161031132154j:plain

  • #00336D
  • #EAEAE0
  • #4D9BE8
  • □ WHITE

どこかレトロに見える「ステンカラー」と「濃い青色」の組み合わせ。シブくてカッコイイ表現をしたいときにおすすめ。

 

11. 失敗しづらい優しい「青系」

f:id:tsukuruiroiro:20161031132149j:plain

  • #E7E9DE
  • #78B9FF
  • #5D86FF
  • #505066

親近感を感じさせる水色系の組み合わせ。失敗しづらい無難かつおしゃれな配色。

  

12. 優しくクールな「水色系」

f:id:tsukuruiroiro:20161031132139j:plain

  • #B5CEE4
  • □ WHITE
  • #444444
  • #E5E5E5

こちらも親近感を感じさせる水色系の配色。「クール・寒いなどの表現をしたいが、優しい雰囲気も出したい」というときにおすすめ。

  

13. チャーミングな「水色」×「黄」

f:id:tsukuruiroiro:20161031132142j:plain

  • #7BCDFF
  • #7BCDFF
  • □ WHITE
  • ■ BLACK

なんとなくドラえもんっぽい配色。水色と白黒のコントラストが映える。黄色は差し色としてちょこっと使うと、まとまりのあるデザインになるはず。

 

緑系の配色パターン

14. ナチュラル、エコを表現する「深緑」

f:id:tsukuruiroiro:20161031132159j:plain

  • #4C6E29
  • □ WHITE
  • #98A51C
  • ■ BLACK

「天然の」「自然に優しい」「素材にこだわった…」などの表現をしたいときにおすすめの緑系色の組み合わせ。明朝体と合わせれば、より渋くて「素材にこだわってる感」が出る。

 

15.美しくファンシーな「緑」×「黄」

f:id:tsukuruiroiro:20161031132140j:plain

  • #60CDB8
  • #F1F46C
  • □ WHITE
  • ■ BLACK

こちらもファンシーな配色。幻想的な表現や、異世界観を表現をしたいときにおすすめ。

  

16. アクティブで力強い「緑」

f:id:tsukuruiroiro:20161031132147j:plain

  • #00A85A
  • #F98A8A
  • ■ BLACK

こちらもエコやクリーンなイメージを表現したいときにおすすめ。強調したい部分については、差し色として「やさしめの赤色(補色)」を使うと良い。

 

17. 白が映える「緑」ベース

f:id:tsukuruiroiro:20161031132155j:plain

  • #5DA797
  • □ WHITE
  • ■ BLACK

渋くメリハリのある表現をしたいときにおすすめの配色。白とのコントラストが映えるので、エメラルドグリーンを背景に文字を白抜きしたりするとオシャレ。

 

黄色系の配色パターン

18. アクティブな印象を与える「黄」×「黒」

f:id:tsukuruiroiro:20161031132137j:plain

  • #FFD100
  • ■ BLACK
  • #FFEEA9
  • □ WHITE

アクティブで大胆な印象を与える黄色ベースの配色。フォントなどの要素も大胆にでかでかと表現するのが効果的。

 

19. 締まったカッコよさ「黒」×「黄」

f:id:tsukuruiroiro:20161031132136j:plain

  • #414141
  • #F7F121
  • #B5B5B4
  • □ WHITE

さきほどとは打って変わってクールな印象を与える配色。黒を背景に、フォントなどのの要素を黄色や白で表現すると効果的。

 

20. プレゼンなどでも使いやすいシンプルな黄色

f:id:tsukuruiroiro:20161031132153j:plain

  • #EFEFEF
  • #F0BC08
  • ■ BLACK
  • □ WHITE

プレゼンのスライドや、カラー資料なんかでも比較的使いやすい無難な配色。

  

赤系の配色パターン

21. 力強い「赤」

f:id:tsukuruiroiro:20161031132156j:plain

  • ■ BLACK
  • #F43E43
  • SILVER
  • □ WHITE

大胆にかっこいい印象を与えられる赤と黒の配色。黒を背景に、赤のフォントをのせても良いし、赤を背景に白・黒のフォントをのせても良い。

 

22. あたたかい「ピンク」×「紫」

f:id:tsukuruiroiro:20161031132138j:plain

  • #F7C9CE
  • #F8ACACF
  • #AAA5D1
  • □ WHITE

「クールさ」と「親近感」を両立する暖かめの紫。ピンクの背景と紫のコントラストが映える。

 

その他の配色パターン

23. 優雅・高級感を表現する配色

f:id:tsukuruiroiro:20161031132148j:plain

  • ■ BLACK
  • #B59658

この2色だけで表現することで高級感や優雅さを表現できるこの配色を選ぶ場合、フォントはゴシックよりも明朝体にするべき。

 

24. 和風

f:id:tsukuruiroiro:20161031132200j:plain

  • #E5DCD1
  • #A85E5C
  • #A08F65
  • #8FA368
  • #757575

日本の料亭や旅館、伝統工芸などで「わび・さび」を表現したければこの中の色を組み合わせて使うと良い。「重すぎる」と感じたら、黒のフォントを白に変えると良い。

 

25. シンプルにカッコイイ「グレー」

f:id:tsukuruiroiro:20161031132157j:plain

  • #ADADAD
  • □ WHITE
  • #DBDBDB
  • ■ BLACK

無彩色しか使わない配色。表現の仕方は多種多様。白を背景に黒とグレーをのせても良いし、グレーを背景に白や、黒、明度の違うグレーをのせても良い。カッコイイ写真やフォントと合わせれば、シンプルでおしゃれなデザインができる。

 

こちらの記事もどうぞ!

  1. Webデザイナーが一度は読んでおくべきおすすめの本13冊
  2. 創作意欲が刺激されるほどクリエイティブなウェブデザインをまとめていく
  3. さくっとイメージで学ぶ『色彩の心理学』と『配色の基礎知識』
  4. 全ての人が知っておくべきデザイン・レイアウトの基本ルールとテクニック15選