水色・ライトブルーに合う色は？爽やかにまとめる配色

水色・ライトブルーは、明るく軽い青を使って爽やかに見せたいときに取り入れやすい色です。CSSでは名前付き色の lightblue が ■#ADD8E6 と定義されています。この記事では、このライトブルー ■#ADD8E6 を基準色にし、フロストホワイト、ミストグレー、ペールレモンを組み合わせます。淡い青の軽さを残しながら、文字と操作の見やすさも保つ配色を考えます。

ライトブルーは、淡色を広く使いながら文字だけ深くする

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、ライトブルー ■#ADD8E6 は色相約195度、彩度約53%、明度約79%の明るい青です。背景やカード面にも使いやすい一方、文字やボタンまで淡色にするとコントラストが不足しやすいため、本文と主要操作には深い色を分けて使います。

HueRollの補色・類似色ガイドでも、色相だけでなく彩度・明度・面積まで調整することが重要とされています。ライトブルーでは、白に近い背景を広く使い、無彩色に近いミストグレーや淡い黄みのペールレモンを補助面へ置くと、明るさを保ちながら単調さを避けやすくなります。

爽やかにまとめやすい3つの組み合わせ

本文色にはダークネイビーグレー ■#26323A を使うと、フロストホワイト ■#F8FBFC 上で約12.62:1、ミストグレー ■#E3EAED 上で約10.79:1、ペールレモン ■#F2E8CD 上で約10.75:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

一方、ライトブルー ■#ADD8E6 をフロストホワイト ■#F8FBFC 上の通常文字に使うと、比率は約1.47:1です。白文字 ■#FFFFFF をライトブルー ■#ADD8E6 の上に置く場合も約1.53:1で不足します。ライトブルーの塗り面に文字を置くなら、ダークネイビーグレー ■#26323A なら約8.59:1です。

主要なリンクやCTA（行動を促すボタン）には、ディープブルーグレー ■#315A70 を使う方法があります。フロストホワイト ■#F8FBFC との比率は約7.14:1、ミストグレー ■#E3EAED とは約6.10:1、ペールレモン ■#F2E8CD とは約6.08:1です。白文字 ■#FFFFFF をディープブルーグレー ■#315A70 のボタン上に置く場合も約7.43:1です。

爽やかさは淡い青で作り、操作性は深い色で支える

ライトブルーを使うサービス紹介や予約ページでは、背景をフロストホワイト、カードをミストグレー、小さな案内面をペールレモン、装飾や塗り面をライトブルー、見出し文字をダークネイビーグレー、主要ボタンをディープブルーグレーへ分けると、軽さを残しながら役割を整理できます。

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

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