くすみブルーに合う色は？やわらかい配色の作り方

くすみブルーは、鮮やかな青に灰みを加えたような落ち着いた青を指す言葉として使われますが、Web標準で1つのHEXコードが決まっているわけではありません。この記事では、具体例としてくすみブルー ■#7189A6 を基準色にし、ソフトアイボリー、ダスティピーチ、ペールセージを組み合わせます。青の落ち着きを残しながら、画面全体をやわらかくまとめる方法を紹介します。

くすみブルーには、明るい低彩度色を広く合わせる

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、彩度は色の鮮やかさ、明度は明るさを表します。くすみブルー ■#7189A6 のように鮮やかさを抑えた青は、周囲も高彩度にするより、明るく静かな色を背景やカード面へ使うと、やわらかさを保ったまま役割を整理しやすくなります。

HueRollの補色・類似色ガイドでも、色相環上の距離だけで配色を決めるのではなく、彩度・明度・面積・文字コントラストを調整することが重要とされています。くすみブルーでは、同じ寒色だけで固めず、ダスティピーチのような暖色やペールセージのような低彩度色を補助面に使うと、落ち着いたまま色相の変化を作れます。

やわらかくまとめやすい3つの組み合わせ

本文色にはダークチャコール ■#293039 を使うと、ソフトアイボリー ■#F7F4EF 上で約12.14:1、ダスティピーチ ■#E8D9D1 上で約9.69:1、ペールセージ ■#DCE3D8 上で約10.17:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

一方、くすみブルー ■#7189A6 をソフトアイボリー ■#F7F4EF 上の通常文字に使うと、比率は約3.28:1です。白文字 ■#FFFFFF をくすみブルー ■#7189A6 の上に置く場合も約3.60:1で不足します。くすみブルーは装飾や面として使い、文字や主要操作にはもう一段深い色を使う方が安全です。

主要リンクやCTA（行動を促すボタン）には、ディープスレートブルー ■#40566F を使う方法があります。ソフトアイボリー ■#F7F4EF との比率は約6.89:1、ダスティピーチ ■#E8D9D1 とは約5.50:1、ペールセージ ■#DCE3D8 とは約5.77:1です。白文字 ■#FFFFFF をディープスレートブルー ■#40566F のボタン上に置く場合も約7.56:1です。

やわらかさは色数より、面積と役割で作る

くすみブルーを使う紹介ページや予約ページなら、背景をソフトアイボリー、カードをダスティピーチ、補足面をペールセージ、見出しや装飾をくすみブルー、主要ボタンをディープスレートブルーへ分けると、淡い色を増やしすぎずにやわらかさを作れます。

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

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