CSSのhsl()で色を指定する方法｜透明度・CSS変数・配色例

hsl()は「色相・彩度・明度」で色を指定するため、同じ色相のまま明るさだけ変えるUI配色を作りやすい記法です。ブランド色をCSS変数にまとめ、背景・境界線・ホバーで明度を変えると統一感を保てます。

情報確認日：2026年7月27日

結論：まず押さえるポイント

CSSのhsl()で色を指定する方法の基本

hsl(210 80% 45%)では、210が青系の色相、80%が鮮やかさ、45%が明るさです。現在のCSSではカンマなしのスペース区切りを使えます。透明度はhsl(210 80% 45% / 0.5)です。

色相は0度と360度が赤、120度付近が緑、240度付近が青です。ただし同じ明度でも、人が感じる明るさは色相によって異なります。

最小の実装例

HTML

<a class="primary-button" href="#">資料を見る</a>

CSS

:root {
  --brand-hue: 212;
  --brand-saturation: 82%;
  --brand-lightness: 44%;
}

.primary-button {
  color: white;
  background: hsl(
    var(--brand-hue)
    var(--brand-saturation)
    var(--brand-lightness)
  );
}

.primary-button:hover {
  background: hsl(var(--brand-hue) var(--brand-saturation) 36%);
}

色相と彩度を固定し、明度だけ下げてホバー色を作っています。CSS変数を使うと複数部品のブランド色をまとめて更新できます。

実務で使うときの考え方

薄い背景色を作る

.notice { color: hsl(212 70% 28%); background: hsl(212 80% 96%); border: 1px solid hsl(212 45% 78%); }

透明な影を作る

.card { box-shadow: 0 12px 30px hsl(220 30% 10% / 0.12); }

透明度付き色は背景と混ざるため、実際の背景色の上で確認します。

アクセシビリティ：コントラストは別に確認する

HSLの数値が規則的でも、文字と背景のコントラストが十分とは限りません。通常文字はWCAGの基準を目安に検証ツールで確認し、色だけでエラーや選択状態を伝えないよう、アイコンや文言も併用します。

よくある失敗と直し方

明度50%なら同じ明るさと思う

色相や彩度で知覚の明るさは変わります。実際の配色でコントラストを測定します。

透明度を薄い色の代わりに使う

下地によって色が変わります。背景が変わる部品では不透明色も検討します。

色の数値を各ファイルへ直書きする

微妙に異なる色が増えます。意味のあるトークン名でCSS変数へ集約します。

WordPressで使う場合

WordPressテーマでは、色変数をテーマの共通CSSへ置きます。ブロックエディターのカラーパレットを使う場合は、theme.jsonの色とCSS変数を対応させると、編集画面と公開画面の差を減らせます。

よくある質問

まとめ

hsl()は色相・彩度・明度を分けて調整でき、UIの色展開に向きます。CSS変数で管理し、透明度やダークモードを含め、実際の背景上でコントラストを検証してください。

関連する基礎記事

• CSSの書き方と読み込み方法
• CSSでフォントを指定する方法
• レスポンシブWebデザインのCSS入門

参照した公式資料

• MDN Web Docs: CSSのhsl()関数
• W3C WCAG 2.2解説: コントラスト（最低限）