ベリーダーク・バーミリオンに合う色は？深い赤橙を渋く温かく見せる色合わせ【#362217】

ベリーダーク・バーミリオン（■#362217）は、黒に近い暗さの中に赤橙の色味を残した濃色です。Webサイトでは、ヘッダーやヒーローセクション、フッターなどに使うと温かみのある重厚な印象へ寄せやすい一方、赤や橙だけでまとめると画面全体が強く見えることがあります。ここでは、■#362217にウォームパーチメント、ミューテッドクレイ、ダスティティールを合わせ、深い赤橙を渋く温かく見せる配色例を紹介します。

ウォームパーチメント、ミューテッドクレイ、ダスティティールを合わせる

■#362217には、赤みをわずかに含む明るいウォームパーチメントの■#F4E8E0、赤橙から茶系へのつながりを残すミューテッドクレイの■#C79A83、暖色から色相を離したダスティティールの■#86A8A6を合わせる例が考えられます。

■#F4E8E0は基準色との明るさの差が大きく、暗い背景上の見出しや本文、明るい情報面の背景に使いやすい色です。■#C79A83は赤橙の流れを保ちながら明るさを足せるため、補助テキストや細い区切りに向きます。■#86A8A6は彩度を抑えた青緑系なので、主要ボタンや小さなラベルへ使うと、鮮やかなシアンほど強く見せずに赤橙との差を作れます。

3色を「明るい情報面」「同系色の中間色」「低彩度の寒色アクセント」と分けると、■#362217の温かさを保ちながら、暖色だけが続く状態を避けやすくなります。

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

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

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

一方、■#F4E8E0の上に■#C79A83を置くと約2.08:1、■#86A8A6を置くと約2.14:1です。どちらも明るい本文背景上の通常文字には使わず、本文文字は■#362217のような十分に暗い色へ切り替えます。

渋く温かく見せるなら、赤橙を重ねすぎず青緑を少量にする

■#362217を渋く温かい方向へまとめたい場合は、赤や橙の濃淡を何段階も増やすより、明るい面と同系色の補助色、寒色アクセントの役割を分ける方が調整しやすくなります。■#C79A83は補助情報や区切りに限定し、主要な文章は■#F4E8E0と■#362217の明暗差で読ませます。

■#86A8A6は主要ボタン、細いライン、小さなラベルなどへ絞ると、暖色中心の構成に静かな寒色の変化を加えられます。写真や商品画像に赤、橙、青緑が多い場合は、補助色をさらに増やさず、■#F4E8E0の明るい面を増やして色の密度を調整してください。

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