ミューテッドダーク・ローズに合う色は？暗いローズをしっとり上品に見せる配色【#4A1C2D】

ミューテッドダーク・ローズ（■#4A1C2D）は、赤の温かさと紫寄りの深さをあわせ持つ、彩度を抑えた暗いローズです。Webサイトでは、華やかさを残しながら落ち着きを出したい見出しやナビゲーション、CTA（行動を促す主要ボタン）などに使いやすい一方、似た赤紫を重ねすぎると全体が重く見えやすくなります。ここでは、明るいグレイッシュピンク、モーブグレー、スモーキーアプリコットを組み合わせ、暗いローズをしっとり上品に見せる配色を考えます。

明るいグレイッシュピンクで余白を作り、暖色の差でローズを引き立てる

■#4A1C2Dには、背景用の明るいグレイッシュピンク■#F6F0F2、補助文字に使えるモーブグレー■#755062、温かい差を加えるスモーキーアプリコット■#C58D72を合わせる例が考えられます。

■#F6F0F2は白よりわずかに赤みを含むため、暗いローズとのつながりを残しながら広い本文面を明るくできます。■#755062は基準色より明るく灰みを増した色で、明るい背景上の補足文やメタ情報に使うと主役のローズを邪魔しにくくなります。■#C58D72はローズから黄赤側へ色相をずらした暖色なので、青緑のような寒色を入れずに画面へ変化を付けられます。

本文は明るい面で読み、ミューテッドダーク・ローズは見出しとCTAへ集める

実装では、ページ全体を暗色にするより、本文やカードの背景を■#F6F0F2にして、見出しや主要な操作へ■#4A1C2Dを集めると、ローズの存在感と読みやすさを両立しやすくなります。

コントラスト比は、文字と背景などの相対的な明るさの差を示す数値です。■#4A1C2Dと■#F6F0F2は約12.48:1、■#755062と■#F6F0F2は約6.06:1、■#4A1C2Dと■#C58D72は約4.97:1です。WCAG 2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。

上品さを保つなら、アプリコットは少量にして境界用途を分ける

■#C58D72は、ローズの赤みを受け止めながら少し黄みを足す役目です。面積を増やしすぎると配色全体が温かい方向へ寄るため、カテゴリラベル、短い帯、図表の補助色など小さな範囲から試すと調整しやすくなります。反対に、より静かな印象にしたい場合は■#755062の比率を少し増やし、■#C58D72を装飾だけに絞ります。

注意したいのは明るい背景との組み合わせです。■#C58D72と■#F6F0F2のコントラスト比は約2.51:1なので、■#C58D72を■#F6F0F2上の通常文字には使いません。また、意味のあるUI（ユーザーが操作する画面部品）の境界をこの2色だけで識別させる使い方も避けます。WCAG 2.2では、操作部品や意味のある図形を識別するために必要な視覚情報は隣接色と3:1以上が基準です。ボタンなどの操作要素は■#4A1C2Dを背景や境界に使い、役割が色だけに依存しないよう形やラベルも合わせて確認してください。