ベリーダーク・ブルーに合う色は？黒に近い青を知的に引き立てる組み合わせ【#171F36】

ベリーダーク・ブルー（■#171F36）は、黒に近い暗さの中に青みを残した濃色です。Webサイトでは、ヘッダーやヒーローセクション、フッターなどに使うと落ち着いた印象へ寄せやすい一方、暗い青だけでまとめると情報の境界や優先順位が見えにくくなることがあります。ここでは、■#171F36にミストブルーホワイト、スチールブルー、ミューテッドオーカーを合わせ、黒に近い青を知的に引き立てる配色例を紹介します。

ミストブルーホワイト、スチールブルー、ミューテッドオーカーを合わせる

■#171F36には、わずかに青みを含む明るいミストブルーホワイトの■#EDF1F7、同じ寒色側のスチールブルー■#91A4BD、黄みを抑えたミューテッドオーカー■#B8A06Aを合わせる例が考えられます。

■#EDF1F7は基準色との明るさの差が大きく、暗い背景上の見出しや本文、明るい情報面の背景に使いやすい色です。■#91A4BDは青系のつながりを保ちながら明るさを足せるため、補助テキストや細い区切りに向きます。■#B8A06Aは青から色相を離した低彩度の黄系で、主要ボタンや小さなラベルへ使うと、鮮やかな黄色ほど強く見せずに役割を分けられます。

3色を「明るい情報面」「寒色の中間色」「控えめな暖色アクセント」と分けると、■#171F36の深さを保ちながら、画面に必要な明暗差と変化を付けやすくなります。

黒に近い青は骨格に使い、読む面は明るく分ける

■#171F36を基準色にする場合は、ページ全体を暗くするより、ヘッダーやヒーロー、フッターなどへ濃色を集め、長い文章や数値を読む面を明るく切り替える方が整理しやすくなります。

コントラスト比は、文字や図形と背景の相対的な明るさの差を示す数値です。■#171F36と■#EDF1F7は約14.41:1、■#171F36と■#91A4BDは約6.42:1、■#171F36と■#B8A06Aは約6.44:1です。WCAG 2.2では、通常サイズの文字は4.5:1以上が基準です。また、操作部品や意味のある図形を識別するために必要な視覚情報は、隣接色との3:1以上が基準です。この例で暗い基準色と組み合わせる文字用途は4.5:1以上を満たします。

一方、■#EDF1F7の上に■#91A4BDを置くと約2.25:1、■#B8A06Aを置くと約2.24:1です。どちらも明るい本文背景上の通常文字には使わず、本文文字は■#171F36のような十分に暗い色へ切り替えます。

知的に見せるなら、青の濃淡を増やしすぎず暖色を少量にする

■#171F36を落ち着いた知的な方向へ寄せたい場合は、似た暗青色を何段階も増やすより、明るい面と補助色の役割をはっきり分ける方が調整しやすくなります。■#91A4BDは補助情報や区切りへ限定し、主要な文章は■#EDF1F7と■#171F36の明暗差で読ませます。

■#B8A06Aは主要ボタン、細いライン、小さなラベルなどへ絞ると、寒色中心の構成に変化を付けながら基準色の落ち着きを残せます。写真や商品画像に青や黄系の色が多い場合は、補助色をさらに増やさず、明るい情報面の面積を調整してください。

HueRollでは■#171F36をHEXで指定できます。HEXは#から始まるカラーコードで、Web上の色を表す方法の一つです。関連色や配色候補を確認し、選択した色と白・黒とのコントラストを比べられます。任意の2色同士のコントラスト比較やWCAGの適合レベルの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。