ブルーグレーに合う色は？静かで洗練された配色

ブルーグレーは、青のすっきりした色味とグレーの落ち着きをあわせ持つように見せやすい色です。この記事では、具体例としてブルーグレー ■#6B7C8D を基準色にし、ポーセリンホワイト、クールミスト、ライトグレージュを組み合わせます。寒色の静けさを残しながら、冷たく見えすぎない洗練された配色へ整える方法を紹介します。

ブルーグレーには、明るい中間色と深い文字色を合わせる

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、彩度は色の鮮やかさ、明度は明るさを表します。ブルーグレー ■#6B7C8D のような低彩度寄りの青は、周囲も強い寒色でそろえるより、明るいグレーやグレージュを広い面へ使うと、静かな印象を保ちながら役割を分けやすくなります。

HueRollの補色・類似色ガイドでも、色相環上の距離だけで完成した配色が決まるわけではなく、彩度・明度・面積・文字コントラストまで調整することが重要とされています。ブルーグレーを主役にする場合も、類似色だけで固めず、明るいニュートラルや少し温かいグレージュを補助面に入れると、単調になりにくくなります。

静かで洗練された3つの組み合わせ

本文色にはダークチャコール ■#252B31 を使うと、ポーセリンホワイト ■#F7F7F5 上で約13.33:1、クールミスト ■#E3E8EB 上で約11.58:1、ライトグレージュ ■#E7DED5 上で約10.76:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

一方、ブルーグレー ■#6B7C8D をポーセリンホワイト ■#F7F7F5 上の通常文字に使うと、比率は約4.00:1です。白文字 ■#FFFFFF をブルーグレー ■#6B7C8D の上に置く場合も約4.29:1で、通常文字の4.5:1に届きません。ブルーグレーは見出し背景や装飾に使い、本文や主要操作にはもう一段深い色を使う方が安全です。

主要なリンクやCTA（行動を促すボタン）には、ディープブルーグレー ■#3A4E60 を使う方法があります。ポーセリンホワイト ■#F7F7F5 との比率は約8.03:1、クールミスト ■#E3E8EB とは約6.97:1、ライトグレージュ ■#E7DED5 とは約6.48:1です。白文字 ■#FFFFFF をディープブルーグレー ■#3A4E60 のボタン上に置く場合も約8.61:1です。

洗練さは色数より、明度差と役割で作る

ブルーグレーを使う会社紹介やサービスページなら、背景をポーセリンホワイト、カードをクールミスト、補足面をライトグレージュ、見出しや装飾をブルーグレー、主要ボタンをディープブルーグレーへ分けると、色数を増やしすぎずに静かな階層を作れます。

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

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