ベリーダーク・グリーンに合う色は？黒に近い緑を深みのある印象にする配色例【#17361F】

ベリーダーク・グリーン（■#17361F）は、黒に近い暗さの中に深い緑を残した濃色です。Webサイトでは、ヘッダーやヒーローセクション、フッターなどに使うと重みのある自然な印象を作りやすい一方、暗い緑だけでまとめると情報の境界が見えにくくなることがあります。ここでは、■#17361Fにミストアイボリー、ミューテッドセージ、ダスティテラコッタを合わせ、黒に近い緑を深みのある印象に見せる配色例を紹介します。

ミストアイボリー、ミューテッドセージ、ダスティテラコッタを合わせる

■#17361Fには、わずかに緑みを含む明るいミストアイボリーの■#EEF3E8、同系色のミューテッドセージ■#9FB28C、赤みを抑えたダスティテラコッタ■#D4A08Dを合わせる例が考えられます。

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

3色を「明るい情報面」「同系色の中間色」「控えめな暖色アクセント」と分けると、■#17361Fの深さを保ちながら、暗色だけが続く状態を避けやすくなります。

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

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

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

一方、■#EEF3E8の上に■#9FB28Cを置くと約2.02:1、■#D4A08Dを置くと約2.02:1です。どちらも明るい本文背景上の通常文字には使わず、本文文字は■#17361Fのような十分に暗い色へ切り替えます。

深みを出すなら、緑の濃淡を増やしすぎず暖色を少量にする

■#17361Fを深みのある印象にまとめたい場合は、似た暗緑を何段階も増やすより、明るい面・補助色・アクセントの役割を明確にする方が調整しやすくなります。■#9FB28Cは補助情報や区切りに限定し、主要な文章は■#EEF3E8と■#17361Fの明暗差で読ませます。

■#D4A08Dは主要ボタン、細いライン、小さなラベルなどへ絞ると、緑中心の構成に温かみを少し加えながら基準色の落ち着きを保てます。写真や商品画像に緑やテラコッタ系の色が多い場合は、補助色をさらに増やさず、■#EEF3E8の明るい面を増やして色の密度を調整してください。

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