ベリーダーク・シャルトリューズに合う色は？深い黄緑をシックに馴染ませる配色例【#263617】

ベリーダーク・シャルトリューズ（■#263617）は、黒に近い暗さの中に黄緑の色味を残した濃色です。Webサイトでは、ヘッダーやヒーローセクション、フッターなどに使うと落ち着いた自然色の印象を作りやすい一方、黄緑やオリーブ系だけでまとめると全体がくすんで見えることがあります。ここでは、■#263617にウォームアイボリー、ミューテッドオリーブ、スモーキースレートブルーを合わせ、深い黄緑をシックに馴染ませる配色例を紹介します。

ウォームアイボリー、ミューテッドオリーブ、スモーキースレートブルーを合わせる

■#263617には、やわらかな黄みを含む明るいウォームアイボリーの■#F4F0E4、黄緑系のつながりを残すミューテッドオリーブの■#B9BE86、寒色側へ変化を付けるスモーキースレートブルーの■#8FA2BAを合わせる例が考えられます。

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

3色を「明るい情報面」「同系色の中間色」「低彩度の寒色アクセント」と分けると、■#263617の渋さを保ちながら、黄緑だけで画面が単調になるのを避けやすくなります。

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

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

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

一方、■#F4F0E4の上に■#B9BE86を置くと約1.71:1、■#8FA2BAを置くと約2.29:1です。どちらも明るい本文背景上の通常文字には使わず、本文文字は■#263617のような十分に暗い色へ切り替えます。

シックに馴染ませるなら、黄緑の彩度を上げすぎない

■#263617をシックにまとめたい場合は、鮮やかなライムや黄色を広い面へ増やすより、明るい面と低彩度の補助色を使って差を作る方が調整しやすくなります。■#B9BE86は補助情報や区切りに限定し、主要な文章は■#F4F0E4と■#263617の明暗差で読ませます。

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

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