HSLとは？色相・彩度・明度でWEBカラーを考える方法

TIPS

WEBサイトの色を調整するとき、青を少し明るくしたい、鮮やかさを抑えたい、と感じることがあります。HEXやRGBは赤・緑・青の成分で色を表しますが、HSLは色相・彩度・明度を分けて考えられる形式です。3つの値が何を意味するかを知ると、案内カードなどの配色を目的に合わせて調整しやすくなります。ただし、HSLの明度だけで文字の読みやすさは判断できません。

HSLのH・S・Lは何を調整する数値？

HSLはHue（色相）・Saturation（彩度）・Lightness（明度、ここでは色の相対的な明るさ）の頭文字です。Hは色の種類を角度で表し、0度付近は赤、120度付近は緑、240度付近は青です。Sは0%なら無彩色のグレーになり、100%ならその条件で最大の彩度になります。Lは0%が黒、100%が白で、数値を変えると同じ色相の暗い色・明るい色を考えられます。

例えばCSSのhsl(210 100% 40%)は青 #0066CCです。色相と彩度を変えずにLを80%にしたhsl(210 100% 80%)は淡い青 #99CCFFになります。一方、HとLを保ったままSを0%にしたhsl(210 0% 40%)はグレー #666666です。どの値を動かしたかを説明しやすい点がHSLの利点です。

ただしHSLのLは、人が感じる明るさやWCAGで用いる相対輝度と同じ尺度ではありません。同じS=100%、L=40%でも、青 #0066CCと黄色 #CCCC00では見え方が大きく異なります。Lの数値をそろえれば文字が読める、という考え方は避けましょう。

案内カードの背景・文字・ボタンをHSLで指定する例

架空のイベント案内カードを作ります。外側の背景は白 #FFFFFF、カードは淡い青 #99CCFF、見出しと説明文は濃いグレー #333333にします。詳細リンクは青 #0066CCの塗りつぶしに白文字 #FFFFFFを合わせ、下線も付けます。カードの線には同じ青 #0066CC、キーボードでリンクを選んだときの枠には濃いグレー #333333を使います。

この配色では、淡い青のカードと濃いグレーの本文は約7.48:1、青いリンク背景と白文字は約5.57:1のコントラスト比です。コントラスト比とは、色同士の相対的な明るさの差を表す数値です。カードの青い線は白い外側に対して約5.57:1、淡い青の内側に対して約3.30:1です。カードの淡い青と白い外側だけでは約1.69:1なので、境界を必要とする場合は線や余白も使います。

以下はHTML（WEBページの内容と構造を記述する言語）とCSS（WEBページの見た目を指定するルール）の例です。CSSではhsl(色相彩度明度)の順に数値を書き、HEXではなくHSL値をそのまま指定しています。

<div class="hsl-page">
  <section class="hsl-card" aria-label="イベントの案内">
    <h3>週末の体験講座</h3>
    <p>内容と開催時間をご確認ください。</p>
    <a class="hsl-card__button" href="/sample/event/">
      詳細を確認する
    </a>
  </section>
</div>

.hsl-page {
  padding: 24px;
  background-color: hsl(0 0% 100%);
}
.hsl-card {
  padding: 24px;
  background-color: hsl(210 100% 80%);
  color: hsl(0 0% 20%);
  border: 2px solid hsl(210 100% 40%);
  border-radius: 10px;
}
.hsl-card h3 { margin-top: 0; }
.hsl-card__button {
  display: inline-block;
  padding: 12px 18px;
  background-color: hsl(210 100% 40%);
  color: hsl(0 0% 100%);
  border-radius: 6px;
  text-decoration: underline;
}
.hsl-card__button:focus-visible {
  outline: 3px solid hsl(0 0% 20%);
  outline-offset: 3px;
}

リンク先の/sample/event/は説明用です。実際のサイトでは正しいリンク先へ変更してください。HSLの数値と対応するHEXは前の段落に示したもので、CSS例をコピーするときに色見本の記号を取り除く必要はありません。

同じ明度でも文字のコントラストは変わる

比較すると、青 #0066CCと白 #FFFFFFのコントラスト比は約5.57:1ですが、HSLのLが同じ40%の黄色 #CCCC00と白では約1.72:1です。前者は通常サイズの文字に原則求められる4.5:1を上回り、後者は下回ります。同じ明度の数字を使っても、白背景の文字色を安全に選べるとは限りません。

また、グレー #666666は白背景 #FFFFFFに対して約5.74:1ですが、淡い青背景 #99CCFFに対しては約3.40:1です。背景によって結果が変わるため、通常の小さな説明文には今回の濃いグレー #333333を使います。WCAG 2.2（WEBコンテンツを利用しやすくするガイドライン）では、通常サイズの文字に原則4.5:1以上、必要な操作部品などの非テキスト表示には隣接色と原則3:1以上のコントラストが求められます。

HSLで色相・彩度・明度を調整した後は、文字、背景、枠線が実際に接する組み合わせで確認しましょう。HueRollでは選択色のHSL値を表示し、HEX入力やカラーピッカーで色を調整できます。コントラストは選択色と白・黒との比較に限られ、任意の2色の比較やWCAG適合の自動判定には対応していません。