ダスキー・ミントに合う色は？くすみミントを静かで洗練された印象にする配色【#206048】

ダスキー・ミント（■#206048）は、青みを含む緑の涼しさを残しながら、明るさと鮮やかさを抑えた濃色です。Webサイトでは、予約フォームの見出し、スケジュールカード、カテゴリ選択やフィルターの強調などに使うと、鮮やかなミントよりも落ち着いた画面にまとめやすくなります。ただし、緑系の色だけを広く使うと、操作箇所と説明部分の差が弱く見えることがあります。ここでは、ウォームオフホワイト、ディープグレーグリーン、ダスティモーヴを合わせ、くすみミントを静かに見せながら情報の役割も分けやすい配色を考えます。

明るい暖色寄りの背景に置き、モーヴで穏やかな色相差を作る

■#206048には、背景用のウォームオフホワイト■#F4F1EA、本文や補助文字用のディープグレーグリーン■#39413D、アクセント用のダスティモーヴ■#C7A6B5を合わせる例が考えられます。

■#F4F1EAはわずかに黄みを含む明るい背景で、ミント系の濃色との明度差を確保しながら冷たい色だけに偏るのを避けやすくなります。■#39413Dは緑みを少し含む低彩度の濃色なので、本文や日時、補足説明を基準色より控えめに整理できます。■#C7A6B5は赤紫寄りの低彩度色で、緑系から色相を離しながら強すぎない変化を加えられます。

予約フォームやスケジュールカードでは、ミントを要点と主要操作に集める

実装では、フォームやカードの広い背景を■#F4F1EAにし、予約名、選択中の日付、主要ボタン背景などへ■#206048を使います。本文や注意書きは■#39413Dへ分けると、ダスキー・ミントの役割を要点と操作に限定できます。UI（ユーザーが操作するボタンや入力欄などの画面部品）の補助操作には、濃い■#206048の面に■#C7A6B5の小さなラベルや副ボタンを置き、その上の文字を■#39413Dにする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差です。■#206048と■#F4F1EAは約6.58:1、■#39413Dと■#F4F1EAは約9.32:1、■#39413Dと■#C7A6B5は約4.78:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#206048と■#C7A6B5は約3.38:1なので、濃いミントの面に置く意味のあるUI部品の境界として必要な3:1以上を確保できます。

ダスティモーヴは明るい背景上の文字や境界だけに頼らない

■#C7A6B5は、緑系の画面へ穏やかな色相差を加えるためのアクセントです。広い面積に増やすより、濃い■#206048の中に置く短いラベルや副操作へ絞ると、ミントの静かな主役感を保ちやすくなります。

一方、■#C7A6B5と■#F4F1EAのコントラスト比は約1.95:1です。そのため、明るい背景上の通常文字には使わず、ボタンや入力欄の存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#206048や■#39413Dの枠線・文字など、十分な明度差を持つ色を組み合わせます。