ダスキー・シアンに合う色は？落ち着いた青緑をシックに見せる色合わせ【#206060】

ダスキー・シアン（■#206060）は、青緑の涼しさを残しながら明るさと鮮やかさを抑えた濃色です。Webサイトでは、分析ダッシュボードの見出し、レポートカード、検索・絞り込み画面の選択中タブなどに使うと、鮮やかなシアンよりも落ち着いた強調色として扱いやすくなります。ただし、青緑やグレーだけで画面を組むと、情報量の多いページでは要素同士の差が小さく見えることがあります。ここでは、ソフトグレー、ダークグレー、スモーキークレイを合わせ、落ち着いた青緑をシックに見せながら情報の階層も整理する配色を考えます。

明るいグレーを土台にし、くすんだ赤み色で静かな対比を作る

■#206060には、背景用のソフトグレー■#EEF2F0、本文や補助文字用のダークグレー■#3F4848、アクセント用のスモーキークレイ■#D9B4A5を合わせる例が考えられます。

■#EEF2F0はわずかに緑みを含む明るいグレーで、青緑とのつながりを残しながら大きな明度差を作れます。■#3F4848は彩度を抑えた濃いグレーなので、数値の説明、更新日時、注記などを基準色と競合させず整理できます。■#D9B4A5は赤みを含む低彩度色で、シアン系から色相を離しながら鮮やかさを上げすぎないため、画面に穏やかな温度差を加えられます。

ダッシュボードでは、シアンを見出しと選択状態に集める

実装では、レポートカードや表の広い背景を■#EEF2F0にし、カード見出し、選択中タブ、主要ボタン背景などへ■#206060を使います。本文や補足情報は■#3F4848へ分けると、青緑の役割を強調と操作に限定できます。UI（ユーザーが操作するボタンや入力欄などの画面部品）の小さなアクセントには、濃い■#206060の面に■#D9B4A5の補助ボタンやラベルを置き、その上の文字を■#3F4848にする方法があります。

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

スモーキークレイは明るい背景上の文字や境界だけに頼らない

■#D9B4A5は、青緑に温かい変化を加えるためのアクセントです。広い面積に増やすより、濃い■#206060の中に置く短いラベルや小さな補助操作へ絞ると、シアンの落ち着いた主役感を保ちやすくなります。

一方、■#D9B4A5と■#EEF2F0のコントラスト比は約1.69:1です。そのため、明るい背景上の通常文字には使わず、ボタンや入力欄の存在をこの2色の境界だけで伝える使い方も避けます。明るい面で操作要素を区切る場合は、■#206060や■#3F4848の枠線・文字など、十分な明度差を持つ色を組み合わせます。