プラムに合う色は？深みのある大人っぽい配色

プラムは、赤紫系の色を落ち着いて使いたいときに選びやすい色です。なお、CSSには名前付き色の plum ■#DDA0DD がありますが、タイトルの「深み」に合わせ、この記事では深い赤紫の一例としてプラム ■#6B3F5F を基準色にします。明るい背景と低彩度の補助色を組み合わせ、重くなりすぎず大人っぽく見せる配色を考えます。

プラムには、明るい背景と低彩度の色を合わせる

CSSで使われるHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、彩度は色の鮮やかさ、明度は明るさを表します。深いプラム ■#6B3F5F の周囲まで濃色でそろえると、色の深さより画面全体の重さが目立つことがあります。

そこで、ページ背景はウォームアイボリー ■#F7F2EE のような明るい色にし、カードや補助面にはダスティローズ ■#E9D9DF やダスティセージ ■#DDE5D8 を使います。プラムを広い面に増やすより、背景・補助面・アクセントの役割を分ける方が、深みを残しながら整理しやすくなります。

深みのある大人っぽい3つの組み合わせ

本文色のチャコール ■#2D262C は、ウォームアイボリー ■#F7F2EE 上で約13.25:1、ダスティローズ ■#E9D9DF 上で約10.84:1、ダスティセージ ■#DDE5D8 上で約11.42:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

プラム ■#6B3F5F をリンクやCTAに使う場合、ウォームアイボリー ■#F7F2EE との比率は約7.55:1、ダスティローズ ■#E9D9DF とは約6.18:1、ダスティセージ ■#DDE5D8 とは約6.51:1です。白文字 ■#FFFFFF をプラム ■#6B3F5F のボタン上に置く場合も約8.40:1あるため、通常サイズの文字に使えます。

大人っぽさは、暗くするより色の役割を絞って作る

深い色を増やせば大人っぽく見えるとは限りません。プラム ■#6B3F5F は、主要ボタン、見出しの一部、選択中の要素などに絞り、広い背景は明るく保つ方が色の存在感を活かしやすくなります。60–30–10の考え方を使う場合も、数値を厳密に測るのではなく、背景・補助・アクセントの面積差を作る目安として扱います。

また、選択中・未選択や状態の違いを、プラムと別の色の違いだけで伝えないようにします。WCAGでは、色だけで情報を伝える場合は追加の視覚的な手掛かりが必要です。文字ラベル、アイコン、下線、枠線などを併用すると、色の見え方が異なる場合でも意味を伝えやすくなります。

HueRollでは、基準色からティント、シェード、補色、類似色、各種配色、60–30–10の候補を確認できます。プラムを選んだら、ティントから明るい同系色、補色・類似色から補助色候補を比較し、最後に白・黒とのコントラストを確認すると役割を整理しやすくなります。HueRollのコントラスト確認は選択色と白・黒の比較に限られるため、この記事で示した任意の2色同士の比率は別途計算した値です。