CSS HSL記法

 

CSS3では、色を指定する方法としてRGBに加えてHSL（Hue, Saturation, Lightness）がサポートされている。これにより、色の指定がより直感的かつ柔軟になった。

 

メインのカラーに対して少し違う色を計算して表示する時などに便利。

 

HSL記法のサンプル

.element {
  color: hsl(120, 100%, 50%); /* 緑色 */
  background-color: hsl(240, 100%, 50%); /* 青色 */
}

 

:root {
  --primary-color: hsl(120, 50%, 50%);
  --primary-color-dark: hsl(120, 50%, 40%); /* 10%暗くした色 */
}

.element {
  background-color: var(--primary-color);
  border-color: var(--primary-color-dark);
}

 

HSLの構成要素

 

Hue（色相）	0から360までの角度で表され、色の種類を決定する。0°は赤、120°は緑、240°は青。
Saturation（彩度）	0%から100%までの値で表され、色の鮮やかさを決定する。0%は灰色（無彩色）で、100%は純色。
Lightness（明度）	0%から100%までの値で表され、色の明るさを決定する。0%は黒、100%は白、50%は中間色。

 

 

HEX → HSLに変換する

 

カラーパレットからHSLを取得