黄緑に合う色は？明るく見せる組み合わせ

黄緑は、黄色の明るさと緑の爽やかさをあわせ持ち、画面を軽快に見せたいときに使いやすい色です。ただし「黄緑」は色幅が広いため、この記事ではWebで再現しやすい基準色として、CSSの色キーワード yellowgreen に対応する黄緑 ■#9ACD32 を使います。明るく見せるコツは、黄緑をすべての面へ広げるのではなく、淡い背景と深い文字色の間に置いて役割をはっきりさせることです。

黄緑は淡い背景と深い色を合わせると軽快さを残しやすい

HSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、黄緑 ■#9ACD32 は、色相約80度・彩度約61%・明度50%です。黄色寄りの緑で彩度も高めなので、背景まで強い色にすると画面全体が落ち着かなくなりやすい一方、広い面をほぼ白や淡色にすると、黄緑の鮮やかさが自然に目へ入りやすくなります。

配色を作るときは、背景を明るく、本文や見出しを深く、黄緑をアクセントへ置くと整理しやすくなります。HueRollの補色・類似色ガイドでも、色相環上の関係だけで完成した配色が決まるわけではなく、彩度・明度・面積、周囲の色、文字とのコントラストまで調整することが重要とされています。

明るく見せる3つの組み合わせ

1. アイボリー＋ダークオリーブで自然にまとめる

背景をウォームアイボリー ■#FBFAF2、本文をダークオリーブチャコール ■#263020、ボタンやバッジを黄緑 ■#9ACD32 にすると、明るさを保ちながら自然な印象にまとめやすくなります。背景と本文のコントラスト比は約13.14:1、黄緑上のダークオリーブチャコールは約7.31:1です。黄緑をボタン背景に使う場合は、同じダークオリーブチャコールを文字や枠にも使うと輪郭を明確にできます。

2. ペールブルー＋ディープブルーグレーで爽やかに見せる

ペールブルー ■#F2F8FF を広い背景にし、ディープブルーグレー ■#24465B を本文や見出し、黄緑 ■#9ACD32 を主要操作へ使う組み合わせです。背景と文字は約9.35:1、黄緑とディープブルーグレーは約5.31:1です。黄緑の黄みと淡い青の涼しさが分かれるため、軽快さを出しつつ、文字は深い色で引き締められます。

3. ペールラベンダー＋ディープパープルで印象を強める

背景をペールラベンダー ■#F3EEFA、文字や見出しをディープパープル ■#4F356B、アクセントを黄緑 ■#9ACD32 にすると、明るさを残しながら色相差のある印象的な画面になります。背景とディープパープルは約8.97:1、黄緑とディープパープルは約5.43:1です。黄緑と紫を同じ面積で競わせず、どちらかを小さなアクセントへ絞るとまとまりやすくなります。

白文字を重ねず、面積と状態表示も確認する

黄緑をCTA（行動を促すボタン）やラベルに使う場合、白文字 ■#FFFFFF と黄緑 ■#9ACD32 のコントラスト比は約1.88:1しかありません。WCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1にも、大きな文字に求める3:1にも届かないため、通常のボタン文字には不向きです。黒 ■#000000 なら約11.15:1なので、黄緑の上では暗い文字を選びやすくなります。

また、選択中・成功・重要などの意味を黄緑だけで伝えず、文字ラベル、アイコン、枠線、下線なども組み合わせてください。60–30–10の考え方を使うなら、背景を広く、補助色を中程度、黄緑のような強い色を小さなアクセントとして使うと、明るさと情報の優先順位を両立しやすくなります。

HueRollでは、基準色からティント、シェード、補色、類似色、各種配色、60–30–10の候補を確認できます。黄緑を選んだら、淡い背景候補と深い文字色候補を分けて比較し、最後に実際の文字サイズや状態ごとのコントラストを確認してください。HueRollのコントラスト確認は選択色と白・黒の比較に限られるため、この記事で示した任意の2色同士の比率は別途計算した値です。