今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料、Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。
▼ 目次
- カラフルな配色パターン
- 橙系の配色パターン
- 青系の配色パターン
- 緑系の配色パターン
- 黄色系の配色パターン
- 赤系の配色パターン
- 高級感を表現する配色
- わび・さびを表現する和風配色
- シンプルに格好良いグレーの配色
カラフルな配色パターン
1. 淡い「カラフル」
- ■ #FF7D7D
- ■ #FFD580
- ■ #B3E2B4
- ■ #ABE7FF
- ■ #B8B2EA
- ■ #DBDBDB
淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。
2. 力強い「カラフル」
- ■ #FF6969
- ■ #F9BF4B
- ■ #44D37E
- ■ #6EC4FF
- ■ #9573FF
- ■ #5D5D5E
鮮やかな色を選ぶ場合はこちら。透明感はないが「力強く」「元気」な表現ができる。
3. 落ち着きのある「カラフル」
- ■ #E1E3E4
- ■ #DF907C
- ■ #ECD070
- ■ #83BAD6
- ■ #4DADA1
- □ WHITE
- （■ BLACK）
うすいグレーの背景に、暖色、寒色を2色ずつ合わせた少し暗めのカラフル配色。どの色もそれなりに色が濃いので、文字は白抜きをするとオシャレになる。カラフルなカラーは主役ではなく、アクセント的に一部に使うと効果的。
4. ソフトタッチのナチュラル系配色
- ■ #FEF37F
- ■ #B0DCEE
- ■ #BCEF82
清潔感があり、やわらかいカラフルな配色。白の背景に合わせて使いたい。
オレンジ系の配色パターン
5. 温かみのある「橙」の配色
- ■ #F99273
- ■ #FFC776
- ■ #FFD6CC
- ■ #E5E0DF
- □ WHITE
温かみを表現するのにピッタリな橙系の配色。「親近感」「秋らしさ」「温かさ」を表現したいときに使いたい。
6. ヘルシーさを表現する「橙」×「緑」の配色
- ■ #FFECB9
- ■ #61C359
- ■ #FCAA00
- □ WHITE
健康的に見える「ベージュ」×「黄緑」×「あざやかな橙」の配色。料理や食材がテーマのときに使いたい。
7. 元気な印象を与える「橙」の配色
- ■ #FBFBF0
- ■ #F8C758
- ■ #EB5D00
- ■ #B7B3B2
- □ WHITE
元気で明るい印象を与える組み合わせ。水色は差し色としてほんの一部に使うようにしたい。
8. 力強い「橙」の配色
- ■ #2D2D2D
- ■ #FF5917
- ■ #F9D46B
- □ WHITE
キツめのオレンジは、黒と合わせて使うことで引き締まって見せることができる。この配色を使うときは、力強い太めのゴシックフォントがマッチする。
青系の配色パターン
9. ファンシーなオシャレさ「水色」×「赤」の配色
- ■ #B4DAED
- ■ #EEF9FF
- ■ #FC9D9D
- ■ #5B5B5B
白に近い色を選んだ幻想的な配色。優しく親近感があり、トレンドの配色でもあると思う。思い切って背景に濃い水色を使うことで、オシャレでインパクトのあるデザインになるはず。
10. 少しレトロな落ちついた「青」の配色
- ■ #00336D
- ■ #EAEAE0
- ■ #4D9BE8
- □ WHITE
どこかレトロに見える「ステンカラー」と「濃い青色」の組み合わせ。シブくてカッコイイ表現をしたいときにおすすめ。
11. 失敗しづらい優しい「青系」の配色
- ■ #E7E9DE
- ■ #78B9FF
- ■ #5D86FF
- ■ #505066
親近感を感じさせる水色系の組み合わせ。失敗しづらい無難かつおしゃれな配色。
12. 優しくクールな「水色系」配色
- ■ #B5CEE4
- □ WHITE
- ■ #444444
- ■ #E5E5E5
こちらも親近感を感じさせる水色系の配色。「クール・寒いなどの表現をしたいが、優しい雰囲気も出したい」というときにおすすめ。
13. チャーミングな「水色」×「黄」の配色
- ■ #7BCDFF
- ■ #7BCDFF
- □ WHITE
- ■ BLACK
なんとなくドラえもんっぽい配色。水色と白黒のコントラストが映える。黄色は差し色としてちょこっと使うと、まとまりのあるデザインになるはず。
緑系の配色パターン
14. ナチュラル、エコを表現する「深緑」の配色
- ■ #4C6E29
- □ WHITE
- ■ #98A51C
- ■ BLACK
「天然の」「自然に優しい」「素材にこだわった…」などの表現をしたいときにおすすめの緑系色の組み合わせ。明朝体と合わせれば、より渋くて「素材にこだわってる感」が出る。
15.美しくファンシーな「緑」×「黄」の配色
- ■ #60CDB8
- ■ #F1F46C
- □ WHITE
- ■ BLACK
こちらもファンシーな配色。幻想的な表現や、異世界観を表現をしたいときにおすすめ。
16. アクティブで力強い「緑」の配色
- ■ #00A85A
- ■ #F98A8A
- ■ BLACK
こちらもエコやクリーンなイメージを表現したいときにおすすめ。強調したい部分については、差し色として「やさしめの赤色（補色）」を使うと良い。
17. 白が映える「緑」ベースの配色
- ■ #5DA797
- □ WHITE
- ■ BLACK
渋くメリハリのある表現をしたいときにおすすめの配色。白とのコントラストが映えるので、エメラルドグリーンを背景に文字を白抜きしたりするとオシャレ。
黄色系の配色パターン
18. アクティブな印象を与える「黄」×「黒」の配色
- ■ #FFD100
- ■ BLACK
- ■ #FFEEA9
- □ WHITE
アクティブで大胆な印象を与える黄色ベースの配色。フォントなどの要素も大胆にでかでかと表現するのが効果的。
19. 締まったカッコよさ「黒」×「黄」の配色
- ■ #414141
- ■ #F7F121
- ■ #B5B5B4
- □ WHITE
さきほどとは打って変わってクールな印象を与える配色。黒を背景に、フォントなどのの要素を黄色や白で表現すると効果的。
20. プレゼンなどでも使いやすいシンプルな黄色の配色
- ■ #EFEFEF
- ■ #F0BC08
- ■ BLACK
- □ WHITE
プレゼンのスライドや、カラー資料なんかでも比較的使いやすい無難な配色。
赤系の配色パターン
21. 力強い「赤」の配色
- ■ BLACK
- ■ #F43E43
- ■ SILVER
- □ WHITE
大胆にかっこいい印象を与えられる赤と黒の配色。黒を背景に、赤のフォントをのせても良いし、赤を背景に白・黒のフォントをのせても良い。
22. あたたかい「ピンク」×「紫」の配色
- ■ #F7C9CE
- ■ #F8ACACF
- ■ #AAA5D1
- □ WHITE
「クールさ」と「親近感」を両立する暖かめの紫。ピンクの背景と紫のコントラストが映える。
その他の配色パターン
23. 優雅・高級感を表現する配色
- ■ BLACK
- ■ #B59658
この2色だけで表現することで高級感や優雅さを表現できるこの配色を選ぶ場合、フォントはゴシックよりも明朝体にするべき。
24. わび・さびを表現する和風配色
- ■ #E5DCD1
- ■ #A85E5C
- ■ #A08F65
- ■ #8FA368
- ■ #757575
日本の料亭や旅館、伝統工芸などで「わび・さび」を表現したければこの中の色を組み合わせて使うと良い。「重すぎる」と感じたら、黒のフォントを白に変えると良い。
25. シンプルにカッコイイ「グレー」の配色
- ■ #ADADAD
- □ WHITE
- ■ #DBDBDB
- ■ BLACK
無彩色しか使わない配色。表現の仕方は多種多様。白を背景に黒とグレーをのせても良いし、グレーを背景に白や、黒、明度の違うグレーをのせても良い。カッコイイ写真やフォントと合わせれば、シンプルでおしゃれなデザインができる。
こちらの記事もどうぞ！
- Webデザイナーが一度は読んでおくべきおすすめの本13冊
- 創作意欲が刺激されるほどクリエイティブなウェブデザインをまとめていく
- さくっとイメージで学ぶ『色彩の心理学』と『配色の基礎知識』
- 全ての人が知っておくべきデザイン・レイアウトの基本ルールとテクニック15選