デニムブルーに合う色は？自然になじむ組み合わせ

デニムブルーは、鮮やかな青より少し落ち着いた中間的な青として使いやすい色です。ただし、Web標準で「デニムブルー」という1つのHEXコードが決まっているわけではありません。この記事では、具体例としてデニムブルー ■#4F6F8F を基準色にし、エクリュ、ウォームベージュ、ソフトセージを組み合わせます。青を強く見せすぎず、背景や補助面へ自然になじませる配色を考えます。

デニムブルーには、低彩度の自然な色を合わせる

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、彩度は色の鮮やかさ、明度は明るさを表します。デニムブルー ■#4F6F8F のような中程度の青は、周囲を鮮やかな色で囲むより、明るく彩度を抑えた色へ分けると主役と背景の役割を作りやすくなります。

HueRollの補色・類似色ガイドでも、色相環上の距離だけで完成した配色が決まるわけではなく、彩度・明度・面積・文字コントラストまで調整することが重要とされています。デニムブルーでは、近い寒色だけでまとめず、エクリュやベージュのような暖色系の淡色、セージのような低彩度の緑を補助面に使うと、青の存在感を残しながら自然な色の変化を作れます。

自然になじみやすい3つの組み合わせ

本文色にはダークスレート ■#26323B を使うと、エクリュ ■#F4EFE6 上で約11.45:1、ウォームベージュ ■#E6D6C3 上で約9.22:1、ソフトセージ ■#D3DDCF 上で約9.37:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

デニムブルー ■#4F6F8F は、エクリュ ■#F4EFE6 上では約4.58:1ですが、ウォームベージュ ■#E6D6C3 上では約3.69:1、ソフトセージ ■#D3DDCF 上では約3.75:1です。通常サイズの文字に使うなら背景ごとに確認が必要です。白文字 ■#FFFFFF をデニムブルー ■#4F6F8F の塗り面に置く場合は約5.25:1です。

主要なリンクやCTA（行動を促すボタン）には、より深いデニム ■#2F506D を使う方法があります。エクリュ ■#F4EFE6 との比率は約7.37:1、ウォームベージュ ■#E6D6C3 とは約5.93:1、ソフトセージ ■#D3DDCF とは約6.03:1です。白文字 ■#FFFFFF を深いデニム ■#2F506D のボタン上に置く場合も約8.44:1です。

自然になじませるなら、色を増やすより役割を固定する

デニムブルーを使う紹介ページやECサイトなら、背景をエクリュ、カードをウォームベージュ、補足面をソフトセージ、見出しや装飾をデニムブルー、主要ボタンを深いデニムへ分けると、青を主張させすぎずに使えます。60–30–10の考え方も、数値を厳密に測るのではなく、背景を広く、補助色を中程度、主役色や操作色を小さく使う目安として扱います。

また、選択状態や重要度をデニムブルーと別の色の違いだけで伝えないようにします。WCAGでは、色を情報伝達の唯一の視覚的手段にしないことが求められています。文字ラベル、アイコン、下線、枠線なども併用してください。

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