ボトルグリーンに合う色は？高級感を出す色合わせ

ボトルグリーンは、深い緑を主役にしたいときに使いやすい色です。この記事では具体例として、ボトルグリーン ■#12372A を基準色にし、ウォームアイボリー、ストーングレー、ミューテッドシャンパンを組み合わせます。暗い緑を広げすぎず、明るい面と落ち着いた暖色を支えにすることで、高級感を狙った配色へ整える方法を紹介します。

ボトルグリーンは、明るい面を広くして深さを主役にする

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、今回のボトルグリーン ■#12372A は、色相約159度・彩度約51%・明度約14%です。かなり暗い緑なので、背景・カード・ボタンまで同じ濃さでそろえるより、背景や補助面を明るくし、深い緑は見出し・ブランド要素・主要操作へ絞ると、色の重さを整理しやすくなります。

HueRollの補色・類似色ガイドでは、色相環上の距離だけで完成した配色が決まるわけではなく、補色を大きく使うと競い合いやすいため、彩度・明度・面積を調整することが勧められています。ボトルグリーンでは、広い面をアイボリーやストーングレーで静かにし、暖色側はミューテッドシャンパンのような低彩度色を小さく使うと、深い緑を主役として見せやすくなります。

高級感を狙いやすい3つの色合わせ

本文色にはダークチャコール ■#2A2D2B を使うと、ウォームアイボリー ■#F7F3E8 上で約12.55:1、ストーングレー ■#E7E1D8 上で約10.71:1、ミューテッドシャンパン ■#D8C59B 上で約8.21:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

ボトルグリーン ■#12372A は、ウォームアイボリー ■#F7F3E8 との比率が約11.80:1、ストーングレー ■#E7E1D8 とは約10.06:1、ミューテッドシャンパン ■#D8C59B とは約7.71:1です。これらの明るい面では通常サイズの見出しやリンク文字にも使えます。白文字 ■#FFFFFF をボトルグリーン ■#12372A のボタン上に置く場合も約13.08:1です。

高級感は色だけで決めず、面積と余白も整える

高価格帯の商品やサービスを紹介するページなら、背景をウォームアイボリー、カードをストーングレー、小さなバッジや区切りをミューテッドシャンパン、主要ボタンと見出しの一部をボトルグリーンへ割り当てると、色数を増やしすぎずに深い緑を印象づけられます。

60–30–10の考え方も、数値を厳密に測るのではなく、背景を広く、補助色を中程度、主役色や差し色を小さく使う目安として扱います。高級感の印象は色だけで決まらないため、余白、文字サイズ、写真や図版の扱いも含めて整えてください。また、選択状態や重要度を色だけで伝えず、文字ラベル、アイコン、下線、枠線なども併用します。

HueRollでは、基準色からティント、シェード、補色、類似色、各種配色、60–30–10の候補を確認できます。ボトルグリーンを選んだら、ティントで背景候補、シェードで深い操作色候補、補色や類似色で差し色候補を比較すると、用途に合わせて調整しやすくなります。HueRollのコントラスト確認は選択色と白・黒の比較に限られるため、この記事で示した任意の2色同士の比率は別途計算した値です。