ディープ・ミントに合う色は？深いミントを洗練された印象にする配色【#1B9869】

ディープ・ミント（■#1B9869）は、青みを含む緑に深さを持たせた色です。Webサイトでは、在庫管理や商品入出庫のダッシュボードで、商品カテゴリ、主要な更新操作、選択中の行などに使うと、鮮やかなミントよりも落ち着きを残しながら洗練された方向へ寄せやすくなります。ただし、■#1B9869は明るい背景上の通常文字としてはコントラストが十分ではないため、文字色として広く使うより、主要ボタンや選択面の背景として役割を決める方が扱いやすい色です。ここでは、クールミスト、インクグリーン、ディーププラムを合わせ、深いミントを主役にしながら在庫情報を整理しやすい配色を考えます。

クールミストを土台にし、濃い文字色とプラムで役割を分ける

■#1B9869には、背景用のクールミスト■#F2F7F4、本文やボタン文字用のインクグリーン■#181D1B、補助操作用のディーププラム■#3F3046を合わせる例が考えられます。

■#F2F7F4は青緑をわずかに含む明色で、在庫一覧や商品カードの広い面を軽くできます。■#181D1Bは緑みをほんの少し含む濃色なので、商品名、SKU、数量、更新日時などをミント一色にせず整理できます。■#3F3046は紫寄りの濃色で、ミントから色相を離しながら彩度を抑えているため、補助操作を別の役割として見せやすくなります。

在庫管理では、ディープ・ミントを主要操作と選択面に集める

実装では、在庫一覧や商品情報カードの広い背景を■#F2F7F4にし、主要な「在庫を更新」ボタンや選択中の商品行の背景へ■#1B9869を使います。その上の文字は■#181D1Bにすると、通常文字に必要なコントラストを確保できます。本文、商品名、数量、更新日時は■#181D1Bで統一し、色だけで情報階層を作らないようにします。

UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、濃い■#1B9869の面に■#3F3046の小さな「履歴を見る」ボタンを置き、その文字を■#F2F7F4にする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#1B9869と■#181D1Bは約4.67:1、■#181D1Bと■#F2F7F4は約15.76:1、■#3F3046と■#F2F7F4は約11.25:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#1B9869と■#F2F7F4は約3.38:1、■#1B9869と■#3F3046は約3.33:1なので、これらを隣接させる意味のあるUI部品を識別するための視覚情報として必要な3:1以上も確保できます。

洗練して見せるなら、在庫状態をミント色だけで伝えない

■#1B9869と■#F2F7F4のコントラスト比は約3.38:1です。そのため、明るい背景上の通常サイズの本文文字として■#1B9869を使うのは避け、文字は■#181D1Bへ切り替えます。ミントは主要ボタン、選択行、枠線などへ役割を絞ると、画面を整えながら情報を読み分けやすくなります。

また、「在庫あり」「残りわずか」「在庫切れ」などの状態は、緑や紫などの色だけで区別せず、状態名の文字、アイコン、記号なども併用します。HueRollでは■#1B9869をHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。