モスグリーンに合う色は？深みのある配色例

モスグリーンは、くすんだ緑を主役にしながら、落ち着きと深みのある配色を作りたいときに使いやすい色です。この記事では具体例として、モスグリーン ■#5B6842 を基準色にし、ウォームパーチメント、ストーンセージ、ミューテッドテラコッタを組み合わせます。鮮やかさを抑えた緑を中心に、明るい面と暖色の小さな差し色で奥行きを作ります。

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

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、今回のモスグリーン ■#5B6842 は、色相約81度・彩度約22%・明度約33%です。彩度を抑えた中間的な緑なので、周囲まで同じ明るさにすると全体が沈みやすくなります。背景は明るく、カード面は少しだけ暗く、暖色の差し色は小さく使うと、モスグリーンの深みを残したまま役割を分けやすくなります。

HueRollの補色・類似色ガイドでは、色相環上の距離だけで配色が完成するわけではなく、補色を大きく使うと競い合いやすいため、彩度・明度・面積を調整することが勧められています。モスグリーンでは、類似するセージ系を補助面に、暖色側のテラコッタを低彩度で小さく置くと、自然なまとまりと色の変化を両立しやすくなります。

深みを出しやすい3つの配色例

本文色にはダークオリーブチャコール ■#2B3027 を使うと、ウォームパーチメント ■#F7F3E9 上で約12.19:1、ストーンセージ ■#DDE0D1 上で約10.07:1、ミューテッドテラコッタ ■#D9B8A2 上で約7.29:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

モスグリーン ■#5B6842 は、ウォームパーチメント ■#F7F3E9 上では約5.41:1ですが、ストーンセージ ■#DDE0D1 上では約4.47:1、ミューテッドテラコッタ ■#D9B8A2 上では約3.23:1です。通常文字に使う場合は背景ごとの確認が必要です。白文字 ■#FFFFFF をモスグリーン ■#5B6842 の上に置く場合は約5.99:1です。

主要なリンクやCTA（行動を促すボタン）には、ディープモス ■#3F4D2D を使う方法があります。ウォームパーチメント ■#F7F3E9 との比率は約8.20:1、ストーンセージ ■#DDE0D1 とは約6.78:1、ミューテッドテラコッタ ■#D9B8A2 とは約4.90:1です。白文字 ■#FFFFFF をディープモス ■#3F4D2D のボタン上に置く場合も約9.09:1です。

深みは暗さだけでなく、明度差と面積で作る

モスグリーンを使うブランド紹介や商品ページでは、背景をウォームパーチメント、カードをストーンセージ、小さな案内面をミューテッドテラコッタ、見出しや装飾をモスグリーン、主要ボタンをディープモスへ分けると、くすんだ緑を使いすぎずに奥行きを作れます。

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

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