ニアブラック・グリーンに合う色は？ほぼ黒の深緑をシックに引き立てる配色例【#112215】

ニアブラック・グリーン（■#112215）は、ほぼ黒に見える暗さの中に深い緑みを残した色です。Webサイトでは重厚な背景や外枠に使いやすい一方、暗い緑だけでまとめると画面全体が沈んで見えることがあります。ここでは、■#112215に明るいアイボリー、くすんだセージ、落ち着いたブロンズを合わせ、深緑をシックに引き立てる配色例を紹介します。

アイボリー、くすんだセージ、スモーキーブロンズを合わせる

■#112215には、明るいアイボリーの■#F3F1EB、くすんだセージの■#93A087、スモーキーブロンズの■#B49A77を合わせる例が考えられます。

■#F3F1EBは基準色との明るさの差が大きく、暗い背景上の見出しや本文、明るい本文エリアに使いやすい色です。■#93A087は緑のつながりを残しながら明るさを足せるため、補助テキストや区切りに向きます。■#B49A77は黄みと茶色みを含むため、主要ボタンや小さな強調に使うと、深緑の重さを崩さずに変化を付けられます。

3色を「明るい面」「同系統の補助色」「落ち着いた暖色の強調」と分けると、■#112215を主役にしたまま情報を整理できます。ブロンズを鮮やかな金色に寄せすぎないことで、装飾感を強くしすぎず、深緑との穏やかな対比を保ちやすくなります。

深緑はページ上部や外枠に使い、本文は明るい面で見せる

■#112215を基準にするなら、暗い面と明るい情報面を分けると使いやすくなります。

ページ上部やページ下部を■#112215にし、見出しを■#F3F1EB、補助情報を■#93A087、主要ボタンを■#B49A77にすると、暗い面の中でも役割を分けられます。本文や数値を読む面は■#F3F1EBへ切り替え、文字を■#112215にすると、深緑を印象づけながら長い文章は明るい面で読ませられます。

コントラスト比は文字や図形と背景の明るさの差を示す数値です。■#112215と■#F3F1EBは約14.72:1、■#112215と■#93A087は約6.03:1、■#112215と■#B49A77は約6.20:1です。W3Cが公開するWCAG 2.2では、通常サイズの文字は4.5:1以上、意味や状態の識別に必要なボタン輪郭やアイコンなどは隣接色との3:1以上が基準です。ここで暗い基準色と組み合わせた文字用途は4.5:1以上を満たします。

一方、■#F3F1EBの上に■#93A087を置くと約2.44:1、■#B49A77を置くと約2.37:1です。どちらも明るい本文背景上の通常文字には使いません。■#B49A77のボタンは、■#112215の暗い面上で使う想定です。

シックに見せるなら暖色を広げすぎず、質感をそろえる

■#112215を落ち着いて見せたい場合は、アクセントを増やすより、暗い面と明るい面の境界、余白、補助色のくすみ方をそろえる方が調整しやすくなります。ページ全体を暗くせず、ページ上部や外枠へ深緑を集め、情報を読む面は■#F3F1EBで明るくします。

■#93A087は補助情報や細い区切りに使い、■#B49A77は主要ボタンや小さなラベルへ限定します。暖色の面積を抑えると、深緑を主役にした落ち着いた構成を保ちやすくなります。写真や商品画像を置く場合は、その色の強さも含めて全体の面積バランスを見直してください。

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