hsl()

hsl() 関数表記は、 sRGB 色を色相、彩度、明度の成分によって表現します。オプションのアルファ成分は、その色の透明度を表します。

試してみましょう

hsl() による補色の定義は、色相環 (en-US)の同じ直径に配置されるため、単一の式で計算することができます。ある色の角度を theta とすれば、その補色は 180deg-theta彩度 の座標となります。

構文

/* 空白区切りの値の構文 */
hsl(hue saturation lightness)
hsl(hue saturation lightness / alpha)

/* カンマ区切りの値の構文 */
hsl(hue, saturation, lightness)
hsl(hue, saturation, lightness, alpha)

hue

<angle>色相環 (en-US) 上の角度を degradgradturn のいずれかの単位で指定したものです。単位のない <number> として書かれた場合、角度として解釈されます。定義によれば、 0deg で、他の色は円周上に広がっているので、 120deg240deg などとなります。また、<angle> は周期的なものなので、暗黙のうちに -120deg = 240deg, 480deg = 120deg, -1turn = 1turn というように折り返されます。この色相環は、色に関連する角度を探すのに役立ちます。 原色(赤-緑-青)と二次色(黄-シアン-マゼンタ)の色相の角度を示す色相環

saturation

<percentage> であり、100% は色の濃さが最大で、 0% は完全に色がありません(無彩色)。

lightness

<percentage> であり、100% は白で、 0% は黒で、 50% は「通常」です。

alpha 省略可

<percentage> または 0 から 1 までの <number> で、数値 1100% に対応して完全に不透明であることを、 00% に対応し完全に透明であることを意味します。

hsl() 関数と conic-gradient() はどちらも角度を扱うので、相性がよいものです。

div {
  width: 100px;
  height: 100px;
  background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
  );
  clip-path: circle(closest-side);
}

仕様書

Specification
CSS Color Module Level 4
# the-hsl-notation

ブラウザーの互換性

BCD tables only load in the browser

関連情報