WEBサイトのブランドカラーを薄くして使う方法｜背景色への展開例

ブランドカラーをWEBサイトの背景にも使いたいときは、元の色をそのまま広い面に塗るのではなく、白を混ぜたTint（ティント、元の色を明るくした派生色）へ展開すると使いやすくなります。ここでは明るめのブルーを基準に、ヒーロー帯・セクション・補助パネルへ薄いブランド色を広げる方法を説明します。狙いは「色を薄くすること」ではなく、ブランドとのつながりを残しながら文字や主要操作を邪魔しない背景を作ることです。

まずブランドカラーを白と混ぜて、不透明な背景色を作る

基準のブランドカラーをブルー ■#3B82F6 とします。HueRollの60–30–10 Paletteでは、背景候補に選択色へ80%の白を混ぜた最も明るいティントを使います。この計算で ■#3B82F6 を薄くすると、淡いブルー ■#D8E6FD になります。

この ■#D8E6FD は、白 ■#FFFFFF とのコントラスト比が約1.26:1です。強い境界を作る色ではなく、ヒーロー帯や大きなセクションなど、広い面へブランドの気配を残す用途に向く例です。さらに薄い背景が必要なら、90%の白を混ぜた例として ■#EBF3FE のように段階を増やせます。

背景を薄くしても、文字は元のブランドカラーに固定しない

淡いブランド背景の上では、文字色を別に決めます。見出しをダークネイビー ■#1E293B、本文をダークブルーグレー ■#334155 にすると、■#D8E6FD に対してそれぞれ約11.60:1、約8.21:1です。通常サイズの文字に必要な4.5:1以上を十分に確保できます。

一方、元のブランドカラー ■#3B82F6 をそのまま ■#D8E6FD 上の通常文字にすると約2.92:1しかありません。リンクや短い強調文字には、濃い派生色のロイヤルブルー ■#1D4ED8 を使うと約5.32:1です。背景をブランド色に寄せたからといって、文字まで同じ明るさの色相にそろえる必要はありません。

たとえば、ページ全体は白 ■#FFFFFF、ヒーロー帯は ■#D8E6FD、補助パネルはさらに淡い ■#EBF3FE とすると、1つのブランドカラーから背景の強弱を作れます。クリック可能なカードや入力欄など、識別に必要な区切りをこの淡い色差だけへ任せないことも大切です。

CSSのopacityで要素全体を薄くする方法とは分けて考える

背景を薄く見せたいときにCSS（Cascading Style Sheets、WEBページの見た目を指定する仕組み）のopacityを要素へ設定すると、その要素の中の文字や子要素まで一緒に半透明になります。背景色だけへアルファ値（透明度）を付ける方法なら文字は不透明のままですが、背後の色が透けるため、最終的に見える背景色は下にある色の影響を受けます。

複数ページで同じ背景色を再利用したい場合は、■#D8E6FD のような不透明なティントをパレットとして決めておくと管理しやすくなります。透明色を使う場合は、実際に重なる背景を含めた表示色でコントラストを確認します。

HueRollではティント・シェード、配色候補、60–30–10 Paletteを確認でき、3桁または6桁のHEXやカラーピッカーで調整できます。コントラスト比較は選択色と白・黒に限られ、任意の2色比較やWCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）のAA・AAA自動判定には対応していません。通常サイズの文字は背景との4.5:1以上を基準に、実際に使う前景色と背景色を個別に確認します。