青に合う色は？使いやすい配色と組み合わせ例【#0000FF】

青は、Webデザインで見出し・リンク・ボタンなど幅広い役割に使いやすい色です。CSSでは名前付き色の blue が ■#0000FF と定義されています。この記事では、この純粋な青 ■#0000FF を基準に、パールホワイト、ペールブルーグレー、ウォームクリームを組み合わせます。強い青を主役にしつつ、背景と補助面を静かにして使いやすくまとめる方法を紹介します。

青は、強さを残して周囲の彩度を下げる

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、青 ■#0000FF は色相240度、彩度100%、明度50%です。非常に鮮やかなため、背景や補助色まで高彩度にすると色同士が競いやすくなります。ページ背景はほぼ白、カード面は淡い寒色、差し色は低彩度の暖色にすると、青の強さを保ちながら役割を整理しやすくなります。

HueRollの補色・類似色ガイドでも、色相だけでなく彩度・明度・面積を調整することが重要とされています。補色側の暖色を使う場合も、純粋な補色を大きく置くのではなく、ウォームクリームのように淡くして小さな面へ使うと、青を引き立てつつ画面全体を落ち着かせやすくなります。

使いやすい3つの組み合わせ例

本文色にはダークチャコール ■#252B36 を使うと、パールホワイト ■#F8F9FC 上で約13.50:1、ペールブルーグレー ■#E8ECF4 上で約12.00:1、ウォームクリーム ■#F0E2C9 上で約11.12:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

青 ■#0000FF は、パールホワイト ■#F8F9FC との比率が約8.16:1、ペールブルーグレー ■#E8ECF4 とは約7.26:1、ウォームクリーム ■#F0E2C9 とは約6.72:1です。これらの背景上では通常サイズのリンク文字にも使えます。白文字 ■#FFFFFF を青 ■#0000FF のボタン上に置く場合も約8.59:1です。

青を使いやすくするなら、役割と面積を先に決める

サービス紹介や申込ページなら、背景をパールホワイト、カードをペールブルーグレー、小さな案内面をウォームクリーム、リンク・主要ボタン・見出しの一部を青へ割り当てると、鮮やかな青を使いながら画面全体を整理できます。

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

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