ダーク・シャルトリューズに合う色は？暗い黄緑を自然に馴染ませる配色例【#4D7A1F】

ダーク・シャルトリューズ（■#4D7A1F）は、黄色と緑の中間にある黄緑を暗く落ち着かせた色です。Webサイトでは、美術館や展示会の案内ページで、展覧会名、作品カテゴリの見出し、主要なチケットボタンなどに使うと、鮮やかなライム色よりも穏やかに馴染ませやすくなります。ただし、作品写真やポスター自体の色が強いページでは、黄緑を広い面に増やすと展示物よりUIが目立つことがあります。ここでは、ウォームペーパー、チャコールオリーブ、ペールクレイを合わせ、暗い黄緑を自然に馴染ませながら作品情報を整理しやすい配色を考えます。

紙のような明色を土台にし、ペールクレイで黄緑の硬さをやわらげる

■#4D7A1Fには、背景用のウォームペーパー■#F7F4EC、本文や補助文字用のチャコールオリーブ■#45463D、アクセント用のペールクレイ■#E4C7C2を合わせる例が考えられます。

■#F7F4ECはわずかに黄みを含む明色で、シャルトリューズとのつながりを残しながら展示情報の面を明るくできます。■#45463Dは緑みを少し含む低彩度の濃色なので、作品解説、作家名、開催日時などを主役色より控えめに整理できます。■#E4C7C2は赤みを含む淡い土色で、黄緑から色相を離しつつ鮮やかさを抑えているため、自然色のまとまりを崩さずにやわらかな変化を加えられます。

展示案内では、シャルトリューズを見出しと主要操作に集める

実装では、作品情報や展示概要カードの広い背景を■#F7F4ECにし、展覧会名、作品カテゴリ見出し、主要な「チケットを見る」ボタン背景などへ■#4D7A1Fを使います。作品解説や作家情報は■#45463Dへ分けると、ダーク・シャルトリューズを要点と操作へ限定できます。UI（ユーザーが操作するボタンや選択欄などの画面部品）の補助操作には、濃い■#4D7A1Fの面に■#E4C7C2の小さな副ボタンやラベルを置き、その文字を■#45463Dにする方法があります。

コントラスト比は、文字やUIと背景の相対的な明るさの差を示す数値です。■#4D7A1Fと■#F7F4ECは約4.64:1、■#45463Dと■#F7F4ECは約8.70:1、■#45463Dと■#E4C7C2は約6.03:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では通常サイズの文字に4.5:1以上が求められるため、ここで文字用途として示した組み合わせはその基準を満たします。また、■#4D7A1Fと■#E4C7C2は約3.22:1なので、濃い黄緑の面に置く意味のあるUI部品の境界として必要な3:1以上も確保できます。

展示作品の色を活かすなら、アクセントを広げすぎない

■#E4C7C2と■#F7F4ECのコントラスト比は約1.44:1です。そのため、明るい背景上の通常文字には使わず、ボタンやカードの存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#4D7A1Fや■#45463Dの枠線・文字を組み合わせます。

また、展示作品やポスターが鮮やかな場合は、ペールクレイを大きな背景へ増やすより、短いラベルや補助操作へ絞り、■#F7F4ECの余白を残す方が作品の色とUIを分けやすくなります。HueRollでは■#4D7A1FをHEX（#から始まるWeb用カラーコード）で指定し、関連色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、この記事の2色同士の比率は別途計算した値です。