セージグリーンに合う色は？落ち着いた配色の作り方

セージグリーンは、鮮やかさを抑えたやわらかな緑を主役にして、落ち着いた配色を作りたいときに使いやすい色です。この記事では具体例として、セージグリーン ■#8FA58C を基準色にし、ウォームオフホワイト、ライトグレージュ、ペールミストを組み合わせます。淡い色だけでぼやけないように、文字と主要操作には深い色を分けて使います。

セージグリーンは、低彩度のまま明度差をつける

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、今回のセージグリーン ■#8FA58C は、色相約113度・彩度約12%・明度約60%です。彩度が低く明るめなので、背景やカード面にもなじみやすい一方、文字やボタンまで同じ淡さにすると区別が弱くなります。広い面は明るい低彩度色でそろえ、本文や主要操作だけを深い色にすると、静かな雰囲気を保ちながら情報の役割を分けやすくなります。

HueRollの補色・類似色ガイドでも、色相環上の距離だけで完成した配色が決まるわけではなく、彩度・明度・面積、文字とのコントラストまで調整することが重要とされています。セージグリーンでは、似た低彩度色を広い面に使い、色相差を大きくしすぎないことで、まとまりを保ちやすくなります。

落ち着いて見せやすい3つの組み合わせ

本文色にはダークグリーンチャコール ■#2D342E を使うと、ウォームオフホワイト ■#F7F6F1 上で約11.82:1、ライトグレージュ ■#E6E0D5 上で約9.74:1、ペールミスト ■#DCE7E2 上で約10.09:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

一方、セージグリーン ■#8FA58C をウォームオフホワイト ■#F7F6F1 上の通常文字に使うと約2.45:1です。白文字 ■#FFFFFF をセージグリーン ■#8FA58C の上に置く場合も約2.65:1で、通常文字の4.5:1には届きません。基準色は背景・装飾・大きめの面に使い、通常文字や主要操作にはより深い色を使います。

主要なリンクやCTA（行動を促すボタン）には、ディープセージ ■#415A46 を使う方法があります。ウォームオフホワイト ■#F7F6F1 との比率は約6.99:1、ライトグレージュ ■#E6E0D5 とは約5.76:1、ペールミスト ■#DCE7E2 とは約5.97:1です。白文字 ■#FFFFFF をディープセージ ■#415A46 のボタン上に置く場合も約7.57:1です。

落ち着きは色数を減らし、役割を固定して作る

セージグリーンを使うウェルネス、生活雑貨、サービス紹介などのページなら、背景をウォームオフホワイト、カードをライトグレージュ、一部の案内面をペールミスト、装飾や塗り面をセージグリーン、見出し文字をダークグリーンチャコール、主要ボタンをディープセージへ分けると、淡い配色でも役割を見失いにくくなります。

60–30–10の考え方も、数値を厳密に測るのではなく、背景を広く、補助色を中程度、主役色や操作色を小さく使う目安として扱います。また、選択状態や重要度を色だけで伝えず、文字ラベル、アイコン、下線、枠線なども併用してください。

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