「この色の組み合わせだとなんだかまとまりがないな…」「このイメージに合う色ってなんだろう」と悩んではいませんか？
とくに初心者Webデザイナーは配色が適切かどうかわからず、迷ってしまうことも多いですよね。色がなかなか決まらないために、制作に時間がかかってしまうこともあるでしょう。
そこでこの記事では、テーマ別に3色のカラーパターンを合計70個ご紹介します！
Webデザインで配色が重要な理由についても解説していますので、色選びで悩むことの多い方はぜひ参考にしてください。
【テーマ別】3色のカラーパターン70個
早速、3色のカラーパターンをテーマ別にご紹介します。
「配色がうまく定まらない」「どのような色を使えばよいかわからない」という方はぜひ参考にしてみてください。
- 信頼感のある配色
- 親しみのある配色
- ポップな配色
- 春らしい配色
- 夏らしい配色
- 秋らしい配色
- 冬らしい配色
信頼感のある配色
 | |
| ネイビーブルー（#000080） グレー（#808080） ホワイト（#ffffff） | ダークグリーン（#006400） ベージュ（#f5f5dc） ブラウン（#a52a2a） |
 | |
| 深藍（#000033） ライトブルー（#00bfff） ホワイト（#ffffff） | モスグリーン（#006600） オフホワイト（#f8f8ff） ライトグレー（#d3d3d3） |
 | |
| グレープ（#6930c3） ベージュ（#f5f5dc） ライトブラウン（#a52a2a） | チャコールグレー（#333333） クリーム色（#fffacd） ネイビーブルー（#000080） |
 | |
| ダークブラウン（#654321） カーキ（#b8860b） ベージュ（#f5f5dc） | カーキグリーン（#424242） グレー（#808080） ホワイト（#ffffff） |
 | |
| ネイビーブルー（#000080） ライトグレー（#d3d3d3） オレンジ（#ff8000） | ブルーグレー（#6699cc） オフホワイト（#f8f8ff） モスグリーン（#006600） |
親しみのある配色
 | |
| パステルピンク（#ffd1dc） ライトブルー（#add8e6） ホワイト（#ffffff） | アイボリー（#fffff0） ベージュ（#f5f5dc） ライトブラウン（#a52a2a） |
 | |
| ミントグリーン（#98ff98） ライトグリーン（#90ee90） ホワイト（#ffffff） | スカイブルー（#87ceeb） ライトイエロー（#ffff00） ホワイト（#ffffff） |
 | |
| ラベンダー（#e6e6fa） ピンク（#ffb6c1） ホワイト（#ffffff） | コーラルピンク（#ff7f50） ベージュ（#f5f5dc） オフホワイト（#f8f8ff） |
 | |
| ライトグリーン（#90ee90） ライトブルー（#add8e6） イエロー（#ffff00） | サーモンピンク（#ff6347） クリーム色（#fffacd） ブラウン（#a52a2a） |
 | |
| ライトブルー（#add8e6） ライトグリーン（#90ee90） パステルピンク（#ffd1dc） | ベージュ（#f5f5dc） ライトブラウン（#a52a2a） オフホワイト（#f8f8ff） |
ポップな配色
 | |
| イエロー（#ffff00） オレンジ（#ffa500） レッド（#ff0000） | ピンク（#ff00ff） グリーン（#00ff00） ブルー（#0000ff） |
 | |
| パープル（#800080） イエロー（#ffff00） グリーン（#00ff00） | オレンジ（#ffa500） ブルー（#0000ff） ホワイト（#ffffff） |
 | |
| ピンク（#ff00ff） イエロー（#ffff00） ブラック（#000000） | グリーン（#00ff00） ブルー（#0000ff） パープル（#800080） |
 | |
| レッド（#ff0000） イエロー（#ffff00） ホワイト（#ffffff） | ブルー（#0000ff） グリーン（#00ff00） オレンジ（#ffa500） |
 | |
| パープル（#800080） ピンク（#ff00ff） イエロー（#ffff00） | ブラック（#000000） ホワイト（#ffffff） レッド（#ff0000） |
春らしい配色
 | |
| 桜色（#ffc0cb） ライトグリーン（#90ee90） ホワイト（#ffffff） | ミントグリーン（#98ff98） ライトブルー（#add8e6） イエロー（#ffff00） |
 | |
| ピンク（#ffb6c1） ベージュ（#f5f5dc） ライトブラウン（#a52a2a） | パステルイエロー（#ffff77） ライトグリーン（#90ee90） ホワイト（#ffffff） |
 | |
| ラベンダー（#e6e6fa） ピンク（#ffb6c1） ホワイト（#ffffff） | スカイブルー（#87ceeb） ライトイエロー（#ffff00） ホワイト（#ffffff） |
 | |
| ライトグリーン（#90ee90） ライトブルー（#add8e6） パステルピンク（#ffd1dc） | サーモンピンク（#ff6347） クリーム色（#fffacd） ブラウン（#a52a2a） |
 | |
| ライトブルー（#add8e6） ライトグリーン（#90ee90） パステルピンク（#ffd1dc） | ベージュ（#f5f5dc） ライトブラウン（#a52a2a） オフホワイト（#f8f8ff） |
夏らしい配色
 | |
| スカイブルー（#87ceeb） ホワイト（#ffffff） ネイビーブルー（#000080） | マリンブルー（#0066ff） イエロー（#ffff00） ホワイト（#ffffff） |
 | |
| オレンジ（#ffa500） イエロー（#ffff00） レッド（#ff0000） | ターコイズブルー（#40e0d0） ライトグリーン（#90ee90） ホワイト（#ffffff） |
 | |
| ブルー（#0000ff） グリーン（#00ff00） ホワイト（#ffffff） | サマーイエロー（#fff96e） ライトブルー（#add8e6） ホワイト（#ffffff） |
 | |
| ピンク（#ff00ff） オレンジ（#ffa500） イエロー（#ffff00） | ホワイト（#ffffff） ネイビーブルー（#000080） ライトブルー（#add8e6） |
 | |
| ライトブルー（#add8e6） グリーン（#00ff00） オレンジ（#ffa500） | ベージュ（#f5f5dc） ブラウン（#a52a2a） ホワイト（#ffffff） |
秋らしい配色
 | |
| ブラウン（#a52a2a） ベージュ（#f5f5dc） オレンジ（#ffa500） | ボルドー（#800000） カーキ（#b8860b） ベージュ（#f5f5dc） |
 | |
| イエロー（#ffff00） オレンジ（#ffa500） レッド（#ff0000） | テラコッタ（#8d4513） ブラウン（#a52a2a） ベージュ（#f5f5dc） |
 | |
| オリーブグリーン（#6d8e23） ブラウン（#a52a2a） ベージュ（#f5f5dc） | マスタードイエロー（#ffdb58） グリーン（#00ff00） ブラウン（#a52a2a） |
 | |
| オレンジ（#ffa500） レッド（#ff0000） ブラウン（#a52a2a） | ブラウン（#a52a2a） ベージュ（#f5f5dc） ホワイト（#ffffff） |
 | |
| グリーン（#00ff00） ブラウン（#a52a2a） オレンジ（#ffa500） | ベージュ（#f5f5dc） ブラウン（#a52a2a） オフホワイト（#f8f8ff） |
冬らしい配色
 | |
| ホワイト（#ffffff） 淡いグレー（#e6e6e6） ライトブルー（#add8e6） | ダークブラウン（#654321） オレンジ（#ffa500） クリーム色（#fffacd） |
 | |
| レッド（#ff0000） グリーン（#00ff00） ホワイト（#ffffff） | ネイビーブルー（#000080） シルバー（#c0c0c0） パープル（#800080） |
 | |
| ライトグレー（#d3d3d3） ホワイト（#ffffff） スカイブルー（#87ceeb） | ブルーグレー（#6699cc） モスグリーン（#006600） オフホワイト（#f8f8ff） |
 | |
| ピンク（#ffb6c1） オレンジ（#ffa500） ライトブルー（#add8c6） | ブラウン（#a52a2a） ベージュ（#f5f5dc） クリーム色（#fffacd） |
 | |
| ホワイト（#ffffff） ブラック（#000000） オレンジ（#ffa500） | レッド（#bd1919） グリーン（#00ab00） ホワイト（#ffffff） |
デザインで配色が重要な3つの理由
なぜデザインで配色が重要なのか、3つの理由を解説します。
理由をしっかり理解して、適切な配色ができるWebデザイナーを目指しましょう。
- 視覚的な印象を与えられる
- 感情へ訴求できる
- 情報の整理ができる
1：視覚的な印象を与えられる
1つ目の理由は、配色によって視覚的な印象を与えられるためです。
人は目からいろいろな情報を捉えますが、色は強い印象を与えるものの一つです。適切な配色を選ぶことで、ターゲット層に訴求をしたり、ブランドイメージを与えたりできます。
たとえば、高級感のあるイメージを想起させたいなら「金」「黒」「白」、子ども向けの商品は元気なイメージを与える「カラフルな色」「ビビッドな色」が使われています。
このように、適切な配色を選ぶことは、商品やサービスのイメージを伝えるために重要なのです。
2：感情へ訴求できる
2つ目の理由は、配色によって感情へ訴求できるためです。
たとえば、赤やオレンジなどの暖色系は活力や興奮を想起させますし、青や緑などの寒色系は落ち着きや安心感を与えます。
スポーツ用品はエネルギッシュなイメージを与える赤やオレンジを、医療関係は安心してもらえるように青や緑が使われていることが多いですよね。
このように色は感情にも強いイメージを与えるので、デザインを見る人にどのようなイメージを与えたいのかを意識して配色を考えることが重要です。
3：情報の整理ができる
3つ目の理由は、色を使うことで情報の整理ができるためです。白黒で表現するよりも情報を認識しやすくなります。
たとえば、重要な情報には赤や濃い色を用いて強調し、情報の強さを表現することが可能です。反対にボタンのOFF状態を表すときに使うグレーは非活性なイメージを与えるため、情報を弱められます。
色を使うと情報の重要性が整理でき、受け手が認識しやすくなるため、適切な配色をすることは重要なのです。
まとめ：配色の原理を理解して効果的に活用しよう！
配色には「視覚的な印象を与える」「感情に訴求する」「情報を整理する」などの効果があるため、適切な色を使うことが重要です。
始めはどの色を使えばよいかわからない場面が多いかと思いますが、経験を重ねていくうちに少しずつ洗練されていきます。
配色を効果的に活用できるよう、実践を繰り返していきましょう！
未経験からWebデザイナーを目指すならデイトラがおすすめ！
東京フリーランスは、Webデザインを仕事にする本格スキルを学べる”デイトラ”を運営しています。
デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています！
デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。
独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。
また、デイトラWebデザインコースは、随時教材をアップデート！一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。
未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください！
ももさん（@momo_web24）
デザイン会社社長。WebアプリのUIUX設計からHP、ロゴ作成まで幅広くWeb制作に携わっている。デイトラWebデザインコースのメンター。