ニアブラック・ゴールドに合う色は？黒に近い黄みを渋く上品に見せる組み合わせ【#202211】

ニアブラック・ゴールド（■#202211）は、黒に近い暗さの中に黄みを残した深い色です。ここでいうゴールドは金属の光沢を再現する色ではなく、HueRoll上の色名として扱います。Webサイトでは暗い背景や外枠に使うと落ち着いた重さを出しやすい一方、黄みの近い色だけでまとめると全体が濁って見えることがあります。ここでは、■#202211に明るいアイボリー、灰色がかったベージュ、くすんだ青を合わせ、黒に近い黄みを渋く上品に見せる配色例を紹介します。

アイボリー、灰色がかったベージュ、くすんだ青を合わせる

■#202211には、やわらかなアイボリーの■#F4F0E6、灰色がかったベージュの■#A99D88、くすんだ青の■#8496A4を合わせる例が考えられます。

■#F4F0E6は基準色との明るさの差が大きく、暗い背景上の見出しや本文、明るい本文エリアに使いやすい色です。■#A99D88は黄みを残しながら灰色を含むため、補助テキストや区切りに使うと全体を穏やかにつなげられます。■#8496A4は黄みから離れた青系なので、主要ボタンや小さな強調に使うと、暖色を増やさずに役割を分けられます。

3色を「明るい面」「落ち着いた中間色」「寒色寄りの強調」と分けると、■#202211を主役にしたまま画面を整理できます。青を鮮やかにしすぎず、灰色を含む色へ寄せることで、暗い黄みとの対比が強くなりすぎません。

暗い黄みはページの外側に使い、本文は明るい面へ切り替える

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

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

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

一方、■#F4F0E6の上に■#A99D88を置くと約2.35:1、■#8496A4を置くと約2.68:1です。どちらも明るい本文背景上の通常文字には使いません。■#8496A4のボタンは、■#202211の暗い面上で使う想定です。

上品に見せるなら金色らしさを足しすぎず、黄みの量を整える

■#202211を渋く見せたい場合は、明るい金色や黄色を追加するより、暗い黄みを広い面へ置き、周囲を落ち着いた色で支える方が調整しやすくなります。ページ全体を暗くせず、ページ上部やページ下部へ基準色を集め、情報を読む面は■#F4F0E6で明るくします。

■#A99D88は補助情報や細い区切りに使い、■#8496A4は主要ボタンや小さなラベルへ限定します。青の面積を小さくすると、暗い黄みを主役にした落ち着いた構成を保ちながら、必要な場所だけに変化を付けられます。写真や商品画像を置く場合は、その色の強さも含めて全体の面積バランスを見直してください。

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