ニアブラック・ミントに合う色は？暗いミントを都会的で落ち着いた印象にする配色【#11221C】

ニアブラック・ミント（■#11221C）は、黒に近い暗さの中にわずかな緑みと青みを残した深い色です。Webサイトでは、暗い背景やメニュー領域に使うと落ち着いた印象を作りやすい一方、近い緑だけでまとめると画面が重く見えることがあります。ここでは、■#11221Cに明るい中立色、グレーがかったミント、くすんだモーヴを合わせ、都会的で静かな配色に整える方法を紹介します。

オフホワイト、グレイッシュミント、くすんだモーヴを合わせる

■#11221Cには、明るいオフホワイトの■#F2F4F3、グレーがかったミントの■#8DA69B、くすんだモーヴの■#A18FA8を合わせる例が考えられます。

■#F2F4F3は基準色との明るさの差が大きく、暗い背景上の見出しや本文、明るい本文エリアに使いやすい色です。■#8DA69Bは緑みのつながりを残しながら明るさを足せるため、補助テキストや区切りに向きます。■#A18FA8はミントとは異なる紫みを含むため、主要ボタンや小さな強調へ使うと、派手すぎない変化を付けられます。

3色を「明るい面」「同系統の補助色」「鮮やかさを抑えた別方向のアクセント」と分けると、■#11221Cを主役にしながら落ち着いた画面を作れます。モーヴを鮮やかな紫にしないことで、暗いミントとの対比を保ちながら全体の静けさを崩しにくくなります。

暗いミントはメニューや外枠に使い、情報面を明るくする

■#11221Cを基準にするなら、画面の外側と情報を読む面を分けると使いやすくなります。

ページ上部やサイドメニューを■#11221Cにし、見出しを■#F2F4F3、補助情報を■#8DA69B、主要ボタンを■#A18FA8にすると、暗い外枠の中でも役割を分けられます。本文や数値などをまとめる枠は■#F2F4F3へ切り替え、文字を■#11221Cにすると、暗色を残しながら読み取りやすい面を確保できます。

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

一方、■#F2F4F3の上に■#8DA69Bを置くと約2.36:1、■#A18FA8を置くと約2.71:1です。どちらも明るい本文背景上の通常文字には使いません。■#A18FA8のボタンは、■#11221Cの暗い面上で使う想定です。

都会的に見せるなら色を増やさず、余白とグレー感で整える

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

■#8DA69Bは補助情報や細い区切りに使い、■#A18FA8は主要ボタンや小さなラベルへ限定します。どちらも鮮やかさを抑えた色なので、暗いミントを主役にした静かな配色を保ちやすくなります。写真やグラフを置く場合は、その色数も含めて全体の面積バランスを見直してください。

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