ミスト・オレンジに合う色は？あたたかな淡色を自然にまとめる配色【#F2EEE3】

ミスト・オレンジ（HEX（#から始まるWeb用カラーコード）で ■#F2EEE3）は、オレンジをかなり淡くやわらげた色です。賃貸物件の詳細ページでは、家賃・間取り・面積をまとめる情報欄や設備の案内帯などに使うと、あたたかな淡色を主役にしながら、写真や文字情報となじませやすくなります。ここでは、ディープアンバー、ソフトアイボリー、ミューテッドティールを組み合わせます。

濃いアンバーで文字を支え、青緑で主要操作を分ける

■#F2EEE3には、見出し・本文・家賃表示用として、ここではディープアンバーと呼ぶ■#52463B、ページ背景用のソフトアイボリー■#FCFBF8、主要ボタン用として、ここではミューテッドティールと呼ぶ■#536A70を合わせる例が考えられます。

■#52463Bは赤みと黄みを含む暗いブラウンで、ミスト・オレンジと色相（赤・青・緑など色みの違い）のつながりを残しながら、文字に必要な明るさの差を作れます。■#FCFBF8は白に近いアイボリーなので、物件写真の下に説明や設備一覧が続くページでも、余白を明るく保ちやすい背景候補です。■#536A70は落ち着いた青緑系で、「内見を予約する」「空室状況を確認する」といった主要操作を、あたたかな情報欄から色相で分けたいときに使えます。

物件詳細では、家賃・間取りの要約欄にミスト・オレンジを使う

ページ全体の背景を■#FCFBF8にし、物件名、住所、設備説明、注意事項を■#52463Bで表示します。この2色のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約8.83:1です。

家賃・間取り・専有面積をまとめる要約欄や「南向き」「宅配ボックス」などの設備案内帯の背景に■#F2EEE3を使い、その上の文字を■#52463Bにすると、コントラスト比は約7.88:1です。淡いオレンジを広めの面に使っても、濃い文字なら家賃や設備名を明確に示せます。

主要な「内見を予約する」ボタンは■#536A70を背景にし、その上を■#FFFFFFの文字にすると約5.73:1です。さらに、■#536A70は■#F2EEE3に対して約4.94:1、■#FCFBF8に対して約5.54:1あり、どちらの背景上でもボタンの輪郭を見分けやすくできます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字には4.5:1以上のコントラスト比が必要です。また、操作に必要なボタンの境界などの視覚情報には、隣接色との3:1以上が基準になります。

自然にまとめるなら、淡い面とアイボリーの差だけに頼らない

■#F2EEE3と■#FCFBF8のコントラスト比は約1.12:1で、■#FFFFFFとの組み合わせでも約1.16:1です。そのため、ミスト・オレンジの上に通常サイズの白文字を置いたり、アイボリーとの色差だけで重要な情報欄の境界を示したりする使い方には向きません。

家賃や設備をまとめる欄の境界そのものが識別に必要な場合は、■#52463Bの枠線や見出しを加えます。ミスト・オレンジは情報をまとめる広い面として使い、文字と主要操作を濃色で支えると、あたたかな淡色を自然に残しながら役割を整理できます。HueRollでは■#F2EEE3を入力し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。