5色の組み合わせ｜多色でもまとまる配色パターンと割合

5色配色は、5色を同じ面積で使うのではなく、ベース・メイン・アクセントへ役割を分けるとまとまります。多色でもごちゃつかない割合、実例、配色ツールでの作り方を解説します。

配色・デザイン

はじめて読む方へ｜まず知っておきたい基本

この記事で出てくる基本用語を先に確認します。ここだけ押さえておけば、専門知識がなくても本文を読み進められます。

配色とは

配色とは、複数の色を目的に合わせて組み合わせることです。色相だけでなく、明るさ・鮮やかさ・面積・文字とのコントラストも見やすさに影響します。

5色を使った配色は、色数が多いぶん華やかですが、5色を同じ面積で並べるとごちゃつきやすくなります。重要なのは、色数ではなく役割と面積比です。

まず結論

5色配色では、1色をベース、1〜2色をメイン、残りをアクセントとして役割分担するとまとまりやすくなります。5色すべてを均等に使う必要はありません。

この記事の色

記事テーマを視覚的に理解するための色見本です。概念に固定の公式色がない場合は教材表示として扱います。

← 左右にスライドできます →

教材色 1#3F6682

教材色 2#DDB04F

教材色 3#70A477

教材色 4#C96567

教材色 5#7862A1

配色は色の選び方だけでなく、どの色をどれだけ使うかでも見え方が変わります。

主役を決める 60 / 30 / 10

均等に近づける 40 / 35 / 25

青系3色＋無彩色＋オレンジのように、近い色を中心に一色だけ対照色を加える方法です。

色相が違っても彩度を抑えると、多色でも落ち着いて見えやすくなります。

5色の明るさが全部同じだと競合します。白に近い色、濃色、中間色を混ぜて階層を作ります。

比率は絶対ルールではありません

60-30-10のような配色比率は考え方の目安です。UI・イラスト・資料・インテリアでは必要な面積比が異なります。