Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
カラー Widely available

HSL

HSLカラーモデルは、色相（Hue）、彩度（Saturation）、明度（Lightness）で色を指定する直感的な方法です。RGBと比較して人間が理解しやすく、明るさや鮮やかさの調整が容易です。デザインシステムでの配色設計やカラーバリエーションの生成に適しています。

HSLカラー色指定

概要

HSLカラーモデルは、色相（Hue）、彩度（Saturation）、明度（Lightness）で色を指定する直感的な方法です。RGBと比較して人間が理解しやすく、明るさや鮮やかさの調整が容易です。デザインシステムでの配色設計やカラーバリエーションの生成に適しています。

対応ブラウザ

デスクトップ

Chrome 65+
Edge 79+
Safari 12.1+
Firefox 52+

モバイル

Chrome Android 65+
Safari iOS 12.2+
Firefox Android 52+

基本構文

CSS 
.primary {
  color: hsl(220, 80%, 50%);
}
.overlay {
  background: hsl(0 0% 0% / 0.5);
}

実務での使いどころ

  • 統一感のあるカラーパレット生成

    色相を固定して彩度や明度を変化させることで、一貫性のあるカラーバリエーションを効率的に作成します。

注意点

  • hsl()で指定した色は知覚的に均一ではないため、同じ明度でも色相によって明るさの印象が異なる場合があります。

アクセシビリティ

  • 明度チャンネルを活用してテキストと背景のコントラスト比を確保してください。明度差が大きいほどコントラストが高くなります。

参考リンク