ティールに合う色は？モダンに見せる組み合わせ

ティールは、青と緑の中間にある深めの色で、Webデザインではブランド色や主要なアクセントとして使いやすい色です。CSSでは名前付き色の teal が ■#008080 と定義されています。この記事では、このティール ■#008080 を基準に、ソフトホワイト、クールグレー、ウォームサンドを組み合わせます。ティールの存在感を残しながら、面積と明度を整えてモダンに見せる配色を考えます。

ティールは、鮮やかさより面積と明度差で整える

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）で見ると、ティール ■#008080 は色相180度、彩度100%、明度約25%です。深さのある色なので、背景やカードまで同じ強さでそろえるより、広い面を明るい低彩度色へ分け、ティールは見出し・装飾・主要な強調へ絞ると整理しやすくなります。

HueRollの補色・類似色ガイドでも、色相環上の距離だけで完成した配色が決まるわけではなく、彩度・明度・面積・文字コントラストまで調整することが重要とされています。ティールでは、白に近い背景とクールグレーで静かな面を作り、ウォームサンドを小さく加えると、寒色だけに偏らずモダンな色の対比を作れます。

モダンに見せやすい3つの組み合わせ

本文色にはダークチャコール ■#243233 を使うと、ソフトホワイト ■#F7FAF9 上で約12.66:1、クールグレー ■#E1E8E7 上で約10.70:1、ウォームサンド ■#E8D9C2 上で約9.59:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

ティール ■#008080 は、ソフトホワイト ■#F7FAF9 上では約4.55:1ですが、クールグレー ■#E1E8E7 上では約3.84:1、ウォームサンド ■#E8D9C2 上では約3.44:1です。通常サイズの文字として使う場合は背景ごとに確認してください。白文字 ■#FFFFFF をティール ■#008080 の塗り面に置く場合は約4.77:1です。

主要なリンクやCTA（行動を促すボタン）には、より深いティール ■#005F5F を使う方法があります。ソフトホワイト ■#F7FAF9 との比率は約7.14:1、クールグレー ■#E1E8E7 とは約6.03:1、ウォームサンド ■#E8D9C2 とは約5.40:1です。白文字 ■#FFFFFF をディープティール ■#005F5F のボタン上に置く場合も約7.49:1です。

モダンに見せるなら、ブランド色と操作色を分ける

ティールを使うサービス紹介やダッシュボードでは、背景をソフトホワイト、カードをクールグレー、小さな案内面をウォームサンド、見出しやブランド装飾をティール、主要ボタンをディープティールへ分けると、色数を増やしすぎずに明確な階層を作れます。

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

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