ターコイズ・ターコイズブルーに合う色は？鮮やかさを整える配色

ターコイズは、青と緑の間にある鮮やかな色です。CSSでは名前付き色の turquoise が ■#40E0D0 と定義されています。この記事では、このターコイズ ■#40E0D0 を基準に、フロストホワイト、淡いアクアグレー、ペールコーラルを組み合わせ、鮮やかさを残しながら画面全体を強くしすぎない配色を紹介します。

ターコイズは、明るい面と深い文字・操作色で支える

CSSのHSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）では、彩度は色の鮮やかさ、明度は明るさを表します。ターコイズ ■#40E0D0 のような明るく鮮やかな色は、背景やボタンまで同じ強さでそろえるより、広い面を明るい低彩度色にし、文字や主要操作を深い色へ分けると役割を整理しやすくなります。

HueRollの補色・類似色ガイドでも、色相環上の距離だけで完成した配色が決まるわけではなく、彩度・明度・面積・文字コントラストまで調整することが重要とされています。ターコイズを主役にしつつ、暖色を足す場合はペールコーラルのように彩度を抑え、小さな面積へ限定すると、鮮やかな色同士が競い合いにくくなります。

鮮やかさを整えやすい3つの組み合わせ

本文色にはダークティールチャコール ■#203438 を使うと、フロストホワイト ■#F7FBFA 上で約12.51:1、淡いアクアグレー ■#DCE9E7 上で約10.47:1、ペールコーラル ■#F1DDD8 上で約9.99:1です。いずれもWCAG 2.2（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）が通常サイズの文字に求める4.5:1以上を満たします。

一方、ターコイズ ■#40E0D0 をフロストホワイト ■#F7FBFA 上の通常文字に使うと、比率は約1.57:1です。白文字 ■#FFFFFF をターコイズ ■#40E0D0 の上に置く場合も約1.64:1で不足します。ターコイズの塗り面に文字を置くなら、ダークティールチャコール ■#203438 なら約7.95:1です。

主要なリンクやCTA（行動を促すボタン）には、ディープティール ■#155A5A を使う方法があります。フロストホワイト ■#F7FBFA との比率は約7.62:1、淡いアクアグレー ■#DCE9E7 とは約6.38:1、ペールコーラル ■#F1DDD8 とは約6.08:1です。白文字 ■#FFFFFF をディープティール ■#155A5A のボタン上に置く場合も約7.95:1です。

ターコイズは「目立つ色」と「操作色」を分けて使う

ターコイズ ■#40E0D0 は明るい背景との境界差も小さいため、操作に必要なボタンの輪郭として使う場合は注意が必要です。ボタンの存在を境界で示す必要があるなら、ディープティール ■#155A5A の枠線を加えると、ターコイズとの比率は約4.84:1になり、境界を見分けやすくできます。

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

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