hsl()

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

hue

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

saturation

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

lightness

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

alpha 省略可

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

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

<div></div>

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);
}

• hsla() 関数、この関数の古い別名。
• <color> 型、あらゆる色を表す。
• HSL Color Picker