空色（スカイブルー）に合う色は？明るい印象に仕上げる組み合わせ

空色（スカイブルー）は、明るく軽やかな青を主役にしたいときに使いやすい色です。CSSでは名前付き色の skyblue が ■#87CEEB と定義されています。この記事では、このスカイブルー ■#87CEEB を基準に、クラウドホワイト、ペールサンド、ソフトミントを組み合わせます。空色の明るさを残しながら、文字と操作の見やすさも確保する配色を考えます。

空色は、淡い面を広くして文字だけ深くする

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、スカイブルー ■#87CEEB は色相約197度、彩度約71%、明度約73%の明るい青です。背景やカード面も明るい色でまとめやすい一方、文字やボタンまで淡色にするとコントラストが不足しやすいため、本文と主要操作には深い色を分けて使います。

HueRollの補色・類似色ガイドでも、色相だけでなく彩度・明度・面積まで調整することが重要とされています。空色では、白に近い背景を広く使い、暖色のペールサンドや低彩度のソフトミントを補助面に置くと、明るさを保ちながら単調さを避けやすくなります。

明るい印象に仕上げる3つの組み合わせ

本文色にはダークネイビーグレー ■#23323E を使うと、クラウドホワイト ■#F8FBFD 上で約12.65:1、ペールサンド ■#F2E6D5 上で約10.68:1、ソフトミント ■#DDEEE8 上で約10.94:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

一方、スカイブルー ■#87CEEB をクラウドホワイト ■#F8FBFD 上の通常文字に使うと、比率は約1.68:1です。白文字 ■#FFFFFF をスカイブルー ■#87CEEB の上に置く場合も約1.74:1で不足します。空色の塗り面に文字を置くなら、ダークネイビーグレー ■#23323E なら約7.55:1です。

主要なリンクやCTA（行動を促すボタン）には、ディープスカイブルー ■#245F85 を使う方法があります。クラウドホワイト ■#F8FBFD との比率は約6.62:1、ペールサンド ■#F2E6D5 とは約5.59:1、ソフトミント ■#DDEEE8 とは約5.73:1です。白文字 ■#FFFFFF をディープスカイブルー ■#245F85 のボタン上に置く場合も約6.88:1です。

明るさは空色で作り、操作性は深い青で支える

空色を使うサービス紹介や予約ページでは、背景をクラウドホワイト、カードをペールサンド、補足面をソフトミント、装飾や塗り面をスカイブルー、見出し文字をダークネイビーグレー、主要ボタンをディープスカイブルーへ分けると、軽さを残しながら情報の役割を整理できます。

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

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