リッチ・グリーンに合う色は？深みのある緑を上質に見せる配色例【#14B83D】

リッチ・グリーン（■#14B83D）は、鮮やかさを残しながら明るさを抑えた深い緑です。Webサイトでは、スペシャルティコーヒーの通販ページで、商品名、選択中の焙煎度、主要な「カートに追加」ボタンなどに使うと、深い緑を落ち着いたアクセントとして見せながら商品写真を主役にしやすくなります。ただし、明るい背景に緑の塗りだけを置くと、ボタンや選択チップの境界としてはコントラストが不足する場合があります。ここでは、ソフトアイボリーグリーン、ディープフォレスト、キャラメルベージュを合わせ、文字とUIの見分けやすさも確認しながら上質に見せる配色を組み立てます。

ソフトアイボリーグリーンを土台にし、低彩度の濃色で情報を締める

■#14B83Dには、背景用のソフトアイボリーグリーン■#F7FAF5、本文や枠線用のディープフォレスト■#203127、補助操作用のキャラメルベージュ■#D7B38Dを合わせる例が考えられます。

■#F7FAF5はごく淡い緑みを含む明色で、リッチ・グリーンとのつながりを残しながら商品写真の周囲に広く使えます。■#203127は緑をわずかに含む低彩度の濃色なので、商品名、産地、焙煎度、価格などを落ち着いて整理できます。■#D7B38Dは黄みと赤みを含む低彩度色で、緑から色相を離しつつ鮮やかさを抑えているため、補助ボタンや味わいメモのラベルに穏やかな変化を加えられます。

コーヒー通販では、リッチ・グリーンを商品選択と主要操作に絞る

実装では、商品一覧や商品詳細カードの広い背景を■#F7FAF5にし、選択中の焙煎度、商品名の強調、主要な「カートに追加」ボタン背景へ■#14B83Dを使います。その上の文字は白ではなく■#203127にすると、コントラスト比は約5.20:1となり、通常サイズの文字に必要な基準を満たします。産地、価格、内容量、抽出の目安なども■#203127へまとめると、緑を主要な強調箇所へ限定できます。

UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、■#D7B38Dを「味わいメモを見る」などのボタン背景に使い、文字と枠線を■#203127にします。リッチ・グリーンのボタンにも■#203127の枠線を付けると、淡い背景との境界を緑の色面だけに頼らず示せます。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#203127と■#F7FAF5は約13.04:1、■#203127と■#14B83Dは約5.20:1、■#203127と■#D7B38Dは約7.01:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。

上質に見せるなら、緑の塗りだけで商品選択やボタンを識別させない

■#14B83Dと■#F7FAF5のコントラスト比は約2.51:1です。意味のあるUI部品を識別するための視覚情報には隣接色との3:1以上が求められるため、淡い背景上で緑の塗りだけにボタンや選択チップの境界を任せるのは避けます。■#203127の枠線や文字を組み合わせると、必要な境界を補えます。

また、「選択中」「在庫あり」「売り切れ」などの状態は、グリーンとキャラメルベージュの色分けだけで伝えず、状態名の文字、チェックマーク、アイコンなども併用します。コーヒーバッグや商品写真に緑が多い場合は、ページ全体へさらに■#14B83Dを広げるより、■#F7FAF5の余白を十分に残す方が、商品写真と操作を分けやすくなります。HueRollでは■#14B83DをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。