HSL
メモ: hsla() 関数記法は hsl() の別名です。両者はまったく同じです。hsl() を使用することが推奨されています。
hsl() 関数記法は、sRGB 色空間において、色相、彩度、明度の成分によって色を表現します。オプションのアルファ成分は、その色の透明度を表します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3.1 | 18 | 2 | |
| CSS タイプ | ||||||
hsl.alpha parameter アルファパラメータ | 65 | 79 | 52 | 12.1 | 65 | 12.2 |
hsl.mixed type parameters パラメータに `<percentage>` と `<number>` を混在させます | 121 | 121 | 122 | 18 | 121 | 18 |
hsl.space separated parameters スペースで区切られたパラメータ | 65 | 79 | 52 | 12.1 | 65 | 12.2 |
基本構文
CSS
.primary {
color: hsl(220, 80%, 50%);
}
.overlay {
background: hsl(0 0% 0% / 0.5);
}ライブデモ
実務での使いどころ
-
統一感のあるカラーパレット生成
色相を固定して彩度や明度を変化させることで、一貫性のあるカラーバリエーションを効率的に作成します。
注意点
- hsl()で指定した色は知覚的に均一ではないため、同じ明度でも色相によって明るさの印象が異なる場合があります。
アクセシビリティ
- 明度チャンネルを活用してテキストと背景のコントラスト比を確保してください。明度差が大きいほどコントラストが高くなります。