ダーク・ミントに合う色は？深いミントを静かで洗練された印象にする配色【#1F7A58】

ダーク・ミント（■#1F7A58）は、青みを含む緑を暗く落ち着かせた色です。Webサイトでは、会員プロフィールやアカウント設定ページの見出し、保存ボタン、選択中の設定項目などに使うと、鮮やかなミントよりも静かで洗練された印象へ寄せやすくなります。ただし、ミント系の濃淡だけで画面をまとめると、入力欄・説明文・保存操作の役割が似て見えたり、設定済み・未設定などの状態が色だけに頼った表示になったりします。ここでは、ウォームオフホワイト、チャコールグリーングレー、ペールモーブを合わせ、深いミントを主役にしながら設定画面を落ち着いて整理する配色を考えます。

ウォームオフホワイトを土台にし、ペールモーブで静かな色相差を作る

■#1F7A58には、背景用のウォームオフホワイト■#F7F5F0、本文や補助文字用のチャコールグリーングレー■#3F4742、アクセント用のペールモーブ■#E0C0CAを合わせる例が考えられます。

■#F7F5F0はわずかに黄みを含む明色で、深いミントとの明度差を作りながら、真っ白よりやわらかな設定画面を作れます。■#3F4742は緑みをわずかに含む低彩度の濃色なので、説明文、注記、更新日時などを基準色より控えめに整理できます。■#E0C0CAは赤紫寄りの淡色で、緑系から色相を離しながら鮮やかさを上げすぎず、寒色中心の画面へ静かな変化を加えられます。

アカウント設定では、ダーク・ミントを見出しと保存操作に集める

実装では、プロフィール情報や設定カードの広い背景を■#F7F5F0にし、セクション見出し、選択中の設定名、主要な「変更を保存」ボタン背景などへ■#1F7A58を使います。説明文や補足条件は■#3F4742へ分けると、ダーク・ミントを重要な情報と操作へ限定できます。UI（ユーザーが操作するボタンや入力欄などの画面部品）の補助操作には、濃い■#1F7A58の面に■#E0C0CAの小さな副ボタンやラベルを置き、その文字を■#3F4742にする方法があります。

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

洗練して見せるなら、保存状態や選択状態を色だけで伝えない

■#E0C0CAと■#F7F5F0のコントラスト比は約1.53:1です。そのため、明るい背景上の通常文字には使わず、入力欄やボタンの存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#1F7A58や■#3F4742の枠線・文字を組み合わせます。

また、「保存済み」「未保存」「選択中」などの状態は、色だけで区別せず、状態を示す文字、チェックアイコン、枠線なども併用します。ペールモーブを広い面へ増やすより、濃いミントの中に置く補助操作や短いラベルへ絞ると、ダーク・ミントの静かな印象を保ちやすくなります。HueRollでは■#1F7A58をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。