ダーク・スプリンググリーンに合う色は？深い新緑を落ち着いて見せる色合わせ【#2A7A1F】

ダーク・スプリンググリーン（■#2A7A1F）は、黄緑寄りの新緑を暗く落ち着かせた色です。Webサイトでは、自然体験やワークショップの案内ページで、イベント名、開催概要の見出し、主要な参加ボタンなどに使うと、鮮やかな黄緑よりも落ち着いた印象へ整えやすくなります。ただし、写真に草木の緑が多いページで緑系を広く使いすぎると、見出しや操作要素が写真の色に埋もれやすくなります。ここでは、ウォームアイボリー、チャコールオリーブ、ミストブルーを合わせ、深い新緑を主役にしながら写真と情報を分けやすい配色を考えます。

ウォームアイボリーを土台にし、ミストブルーで緑から少し距離を取る

■#2A7A1Fには、背景用のウォームアイボリー■#F4F3EC、本文や補助文字用のチャコールオリーブ■#3C4338、アクセント用のミストブルー■#BBC7D8を合わせる例が考えられます。

■#F4F3ECは黄みをわずかに含む明色で、新緑との明度差を作りながら真っ白よりやわらかな情報面を作れます。■#3C4338は緑みを少し含む低彩度の濃色なので、本文、持ち物、注意事項などを基準色より控えめに整理できます。■#BBC7D8は青寄りの低彩度色で、緑から色相を少し離しながら鮮やかさを上げすぎず、写真に緑が多いページへ静かな変化を加えられます。

自然体験・ワークショップの案内では、新緑を見出しと主要操作に集める

実装では、開催概要や参加条件をまとめるカードの背景を■#F4F3ECにし、イベント名、日時の見出し、主要な「参加する」ボタン背景などへ■#2A7A1Fを使います。本文や持ち物の説明は■#3C4338へ分けると、ダーク・スプリンググリーンを要点と操作へ限定できます。UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、濃い■#2A7A1Fの面に■#BBC7D8の小さな副ボタンやラベルを置き、その文字を■#3C4338にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#2A7A1Fと■#F4F3ECは約4.84:1、■#3C4338と■#F4F3ECは約9.20:1、■#3C4338と■#BBC7D8は約5.98:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#2A7A1Fと■#BBC7D8は約3.15:1なので、濃い新緑の面に置く意味のあるUI部品の境界として必要な3:1以上も確保できます。

写真に緑が多いときは、緑を増やすより明るい面と境界を残す

■#BBC7D8と■#F4F3ECのコントラスト比は約1.54:1です。そのため、明るい背景上の通常文字には使わず、ボタンやカードの存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#2A7A1Fや■#3C4338の枠線・文字を組み合わせます。

また、写真に葉や芝生などの緑が多い場合は、ページ全体へさらに緑を増やすより、■#F4F3ECの余白や情報カードを十分に残す方が、見出しや操作を分けやすくなります。ミストブルーは補助操作や短いラベルへ絞り、主役の新緑と競わせないようにします。HueRollでは■#2A7A1FをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。