青緑に合う色は？爽やかさを活かす配色例

青緑は、青のすっきり感と緑の軽やかさをあわせて見せやすい色です。この記事では具体例として、青緑 ■#1F9EAA を基準色にし、ソフトホワイト、ペールアクア、ペールコーラルを組み合わせます。明るい面を広く取り、青緑は見出しや装飾の主役として使うことで、爽やかさを保ちながら読みやすい配色に整えます。

青緑は、明るい面と低彩度色で爽やかさを支える

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、今回の青緑 ■#1F9EAA は色相約185度・彩度約69%・明度約39%です。鮮やかさがありながら中程度の明るさなので、背景やカード面まで同じ強さにせず、明るい色と低彩度色を広く使うと、青緑の爽やかさを残しながら画面の役割を分けやすくなります。

HueRollの補色・類似色ガイドでは、補色を大きく使うと色同士が競いやすく、生成した候補も画面で比較しながら彩度や明度を調整することが勧められています。青緑では、類似する淡いアクアを補助面に、暖色側のペールコーラルを小さな差し色にすると、爽やかさを保ちながら単調さを避けやすくなります。

爽やかさを活かす3つの配色例

本文色にはダークブルーグレー ■#20363A を使うと、ソフトホワイト ■#F7FBFA 上で約12.20:1、ペールアクア ■#DDEFEA 上で約10.67:1、ペールコーラル ■#F3DED2 上で約9.81:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

一方、青緑 ■#1F9EAA をソフトホワイト ■#F7FBFA 上の通常文字に使うと約3.08:1、ペールアクア ■#DDEFEA 上では約2.70:1です。白文字 ■#FFFFFF を青緑 ■#1F9EAA の上に置く場合も約3.22:1で、通常文字の4.5:1には届きません。青緑は装飾や大きめの面に使い、通常文字や主要操作にはより深い色を使う方が安全です。

主要なリンクやCTA（行動を促すボタン）には、ディープブルーグリーン ■#12606A を使う方法があります。ソフトホワイト ■#F7FBFA との比率は約6.93:1、ペールアクア ■#DDEFEA とは約6.06:1、ペールコーラル ■#F3DED2 とは約5.57:1です。白文字 ■#FFFFFF をディープブルーグリーン ■#12606A のボタン上に置く場合も約7.22:1です。

爽やかさは青緑で作り、操作性は深い色で支える

青緑を使うサービス紹介や予約ページでは、背景をソフトホワイト、カードをペールアクア、小さな案内面をペールコーラル、見出しや装飾を青緑、主要ボタンをディープブルーグリーンへ分けると、軽さと読みやすさを両立しやすくなります。

60–30–10の考え方も、数値を厳密に測るのではなく、背景を広く、補助色を中程度、主役色や操作色を小さく使う目安として扱います。また、選択状態や重要度を色だけで伝えず、文字ラベル、アイコン、下線、枠線なども併用してください。

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