ベリーダーク・シアンに合う色は？黒みのある青緑を静かに際立たせる色合わせ【#173636】

ベリーダーク・シアン（■#173636）は、黒に近い暗さの中に青緑の色味を残した濃色です。Webサイトでは、ヘッダーやヒーローセクション、フッターなどに使うと落ち着いた寒色の存在感を出しやすい一方、似た暗い青緑だけでまとめると情報の境界が見えにくくなることがあります。ここでは、■#173636にクールパール、ミューテッドティール、ダスティコーラルを合わせ、黒みのある青緑を静かに際立たせる配色例を紹介します。

クールパール、ミューテッドティール、ダスティコーラルを合わせる

■#173636には、青緑をわずかに含む明るいクールパールの■#E8F2F0、同系色のミューテッドティール■#83AAA4、赤みを抑えたダスティコーラル■#CE998Aを合わせる例が考えられます。

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

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

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

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

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

一方、■#E8F2F0の上に■#83AAA4を置くと約2.23:1、■#CE998Aを置くと約2.15:1です。どちらも明るい本文背景上の通常文字には使わず、本文文字は■#173636のような十分に暗い色へ切り替えます。

静かに際立たせるなら、暖色アクセントを広げすぎない

■#173636を落ち着いたまま際立たせたい場合は、暖色を広い面へ増やすより、■#CE998Aを主要ボタン、細いライン、小さなラベルなどへ絞る方が調整しやすくなります。アクセントの面積を小さくすると、深い青緑を主役にした静かな印象を保ちやすくなります。

■#83AAA4は同系色の補助として使い、見出しや本文をすべてティールにしないこともポイントです。写真や商品画像に青緑やコーラル系の色が多い場合は、補助色をさらに増やさず、■#E8F2F0の明るい面を増やして全体の色密度を調整してください。

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