hsl()

エイチエスエル（関数）

意味色相、彩度、明度を指定する関数

hsl()とは？

hsl()関数は、色をHSL色空間で指定するためにCSSで使用する関数です。HSLは「Hue（色相）」「Saturation（彩度）」「Lightness（明度）」の3つの色要素で色を表現します。色相は色の種類（赤、青、緑など）を、彩度は色の鮮やかさを、明度は色の明るさをそれぞれ表します。

hsl()の具体的な使い方

HSLで背景色を設定する例

<style>
  .hsl-color {
    background-color: hsl(120, 100%, 50%);
    padding: 20px;
    color: white;
  }
</style>

<div class='hsl-color'>
  HSL(120, 100%, 50%)
</div>

背景色を明るい緑色に設定しています。色相が120度、彩度が100%、明度が50%です。

hsl()に関するよくある質問

Q. hsl()の各パラメータは何を表す？

A. hsl()の3つのパラメータは順に、色相(0-360度)、彩度(0-100%)、明度(0-100%)を表します。

Q. 色相の値はどう決める？

A. 色相は0-360度の範囲で指定します。0度が赤、120度が緑、240度が青を表し、その間の値で様々な色を表現できます。

Q. hsl()とrgb()はどちらを使うべき？

A. 両方とも有効ですが、hsl()は人間にとって直感的に色を調整しやすいため、デザイン作業では便利です。一方、rgb()は色の数値が既知の場合に便利です。

hsl()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのhsl()やrepeating-linear-gradient()、rgba()、min()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。