モーブに合う色は？くすみ感を活かす組み合わせ

モーブは、紫に赤みや灰みを含んだような落ち着いた色として使われることが多く、華やかさを残しながら鮮やかさを抑えたいときに向いています。この記事では、モーブの具体例として ■#8B6F83 を基準色にし、ウォームアイボリー、淡いモーブ、ソフトセージを組み合わせます。くすみ感をそのまま活かしつつ、文字や操作までぼやけない配色を考えます。

モーブには、明るい低彩度色と深い操作色を合わせる

CSSで使われるHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、彩度は色の鮮やかさ、明度は明るさを表します。モーブの落ち着きを活かしたい場合、周囲に鮮やかな色を増やすより、明るく彩度を抑えた色を広い面に使い、文字や主要操作だけを十分に濃くすると役割を分けやすくなります。

HueRollの補色・類似色ガイドでも、類似色は背景やセクションの連続性を作りやすく、離れた色相はアクセント向きとされています。モーブでは、淡い同系色を補助面に使い、反対側に近いグリーンを使う場合も、ソフトセージのように彩度を抑えると、くすみ感を崩しにくくなります。

くすみ感を活かす3つの組み合わせ

本文色にはダークチャコール ■#2C2830 を使うと、ウォームアイボリー ■#F7F3F0 上で約13.10:1、ペールモーブ ■#E8DFE5 上で約11.09:1、ソフトセージ ■#DDE2D4 上で約10.94:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

一方、基準のモーブ ■#8B6F83 をウォームアイボリー ■#F7F3F0 上の通常文字に使うと、比率は約4.05:1です。白文字 ■#FFFFFF をモーブ ■#8B6F83 の上に置く場合も約4.47:1で、通常サイズの文字に必要な4.5:1へわずかに届きません。見た目だけで「十分濃い」と判断せず、文字用途ではもう一段深い色を使う方が安全です。

主要リンクやCTA（行動を促すボタン）には、ディープモーブ ■#5F4658 を使う方法があります。ウォームアイボリー ■#F7F3F0 との比率は約7.60:1、ペールモーブ ■#E8DFE5 とは約6.44:1、ソフトセージ ■#DDE2D4 とは約6.35:1です。白文字 ■#FFFFFF をディープモーブ ■#5F4658 の上に置く場合も約8.39:1です。

くすみ感は残しつつ、状態や操作は色だけに頼らない

モーブを使う画面では、低彩度の色を増やしすぎると、選択中・未選択やカードの境界まで弱くなることがあります。60–30–10の考え方を使う場合も、数値を厳密に合わせるのではなく、明るい背景を広く、補助色を中程度、モーブやディープモーブを小さく使う目安として扱うと整理しやすくなります。

また、選択状態や重要度をモーブと別の色の違いだけで伝えないようにします。WCAGでは、色を情報伝達の唯一の視覚的手段にしないことが求められています。文字ラベル、アイコン、下線、枠線などを併用してください。

HueRollでは、基準色からティント、シェード、補色、類似色、各種配色、60–30–10の候補を確認できます。モーブを選んだら、ティントで明るい補助面、シェードで操作色、類似色や補色で追加候補を探すと、くすみ感を残したまま役割を分けやすくなります。HueRollのコントラスト確認は選択色と白・黒の比較に限られるため、この記事で示した任意の2色同士の比率は別途計算した値です。