マスタード（からし色）に合う色は？落ち着いた配色の作り方

マスタード（からし色）は、黄色に茶色やくすみを感じさせる落ち着いた黄系の色で、明るさを残しながら派手さを抑えたいときに使いやすい色です。ただし、「マスタード」には一意の標準HEXがなく、CSSの標準色名にも mustard はありません。この記事では、デジタル上の代表例としてマスタードイエロー ■#E1AD01 を基準色にし、落ち着いた配色の作り方を考えます。

マスタードは明るい背景と深い文字色を合わせると落ち着かせやすい

HSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、マスタードイエロー ■#E1AD01 は、色相約46度・彩度約99%・明度約44%です。鮮やかな黄系ですが、一般的な明るい黄色より暗さがあるため、周囲まで茶色や黄土色で固めると、画面全体が重く見えやすくなります。

落ち着いて見せるには、背景をアイボリー、淡いグレー、淡いセージなどの明るい色へ寄せ、本文や見出しに濃いブラウン、ブルーグレー、オリーブ系を使うと整理しやすくなります。マスタードは主要ボタンやバッジの背景、見出し下の線、アイコンなどに絞り、文字は深い色にすると、色の存在感を残しながら情報の優先順位を作れます。

落ち着いた3つの組み合わせ

1. ウォームアイボリー＋ダークブラウンで穏やかにまとめる

背景をウォームアイボリー ■#FBF7EC、本文や見出しをダークブラウン ■#332D24、ボタン背景や見出し下の線をマスタード ■#E1AD01 にする組み合わせです。背景と文字のコントラスト比は約12.73:1、マスタードとダークブラウンは約6.60:1です。黄みのある背景を広く使うことで、マスタードだけが浮かず、温かさを保ちながら落ち着いて見せやすくなります。

2. ライトグレー＋ディープブルーグレーで引き締める

背景をライトグレー ■#F1F4F3、本文や見出しをディープブルーグレー ■#31424B、ボタン背景や装飾線をマスタード ■#E1AD01 にします。背景と文字は約9.43:1、マスタードとディープブルーグレーは約5.06:1です。黄と青系の色相差を使いながら、背景を無彩色に近づけることで、マスタードの強さを整理しやすくなります。

3. ソフトセージ＋ダークオリーブで自然になじませる

背景をソフトセージ ■#E7ECD9、本文や見出しをダークオリーブ ■#3B442C、ボタン背景や小さな装飾をマスタード ■#E1AD01 にする組み合わせです。背景と文字は約8.49:1、マスタードとダークオリーブは約4.97:1です。黄と緑を同じ面積で競わせず、淡い緑を広く、マスタードを小さく使うと、自然なまとまりを作りやすくなります。

白文字を避け、マスタードの面積を限定する

マスタード ■#E1AD01 をボタン背景に使う場合、白 ■#FFFFFF とのコントラスト比は約2.06:1です。WCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1にも、大きな文字に求める3:1にも届きません。一方、黒 ■#000000 との比率は約10.18:1なので、今回の基準色では暗い文字の方が使いやすくなります。

また、マスタード、ベージュ、ブラウンをすべて同じくらいの面積で使うと、色相や明度が近くなり、カードやボタンの境界が弱くなることがあります。背景は明るく、本文は深く、マスタードは主要操作や強調箇所というように役割を分けると、落ち着いた印象を保ちながら画面を整理できます。

HueRollでは、HEX入力やカラーピッカーでマスタードの候補を調整し、ティント、シェード、補色、類似色、各種配色、60–30–10の候補を確認できます。色名だけで決めず、実際に採用するHEXを基準に背景・文字・アクセントを比較してください。HueRollのコントラスト確認は選択色と白・黒の比較に限られるため、この記事で示した任意の2色同士の比率は別途計算した値です。