ネイビー（紺色）に合う色は？上品にまとめる配色例

ネイビー（紺色）は、深い青を主役にしたいときに使いやすい色です。CSSでは名前付き色の navy が ■#000080 と定義されています。この記事では、このネイビー ■#000080 を基準色にし、ウォームアイボリー、ミストブルーグレー、ミューテッドシャンパンを組み合わせます。濃い青を広げすぎず、明るい面と低彩度の補助色で支えることで、上品にまとめやすい配色を考えます。

ネイビーは、明るい面を広くして主役を絞る

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、ネイビー ■#000080 は色相240度、彩度100%、明度約25%の深い青です。暗い色を背景・カード・ボタンへ同じように広げると画面全体が重くなりやすいため、ページ背景や補助面は明るい色へ分け、ネイビーは見出しや主要操作へ絞ると役割を整理しやすくなります。

HueRollの補色・類似色ガイドでも、色相環上の距離だけで完成した配色が決まるわけではなく、彩度・明度・面積・文字コントラストまで調整することが重要とされています。ネイビーの場合も、強い補色を大きく使うより、明るいニュートラルや彩度を抑えた暖色を小さく加える方が、濃い青を落ち着いて見せやすくなります。

上品にまとめやすい3つの組み合わせ例

本文色にはダークチャコール ■#252B33 を使うと、ウォームアイボリー ■#F8F4EA 上で約12.99:1、ミストブルーグレー ■#E6EAF0 上で約11.82:1、ミューテッドシャンパン ■#E8D9B9 上で約10.23:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

ネイビー ■#000080 をリンクやCTA（行動を促すボタン）に使う場合、ウォームアイボリー ■#F8F4EA との比率は約14.58:1、ミストブルーグレー ■#E6EAF0 とは約13.26:1、ミューテッドシャンパン ■#E8D9B9 とは約11.48:1です。白文字 ■#FFFFFF をネイビー ■#000080 のボタン上に置く場合も約16.01:1です。

上品に見せるなら、ネイビーの面積と役割を固定する

ネイビーを使う会社紹介やサービスページでは、ページ背景をウォームアイボリー、カードをミストブルーグレー、補足バッジをミューテッドシャンパン、主要ボタンと見出しの一部をネイビーへ割り当てると、濃い青を使いすぎずに階層を作れます。

60–30–10の考え方も、数値を厳密に測るのではなく、背景を広く、補助色を中程度、ネイビーのような強い色を小さく使う目安として扱います。また、選択状態や重要度を色だけで伝えず、文字ラベル、アイコン、下線、枠線なども併用してください。

HueRollでは、基準色からティント、シェード、補色、類似色、各種配色、60–30–10の候補を確認できます。ネイビーを選んだら、ティントで背景候補、類似色で補助色候補、補色側は小さな差し色候補として比較すると、濃い青の強さを保ちながら整理しやすくなります。HueRollのコントラスト確認は選択色と白・黒の比較に限られるため、この記事で示した任意の2色同士の比率は別途計算した値です。