CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのhsl()関数とは？色相・彩度・輝度で色を指定する方法

CSSの hsl() 関数は、HSL（Hue-Saturation-Lightness：色相・彩度・輝度）モデルに基づいて色を定義するためのメソッドです。RGBよりも直感的に色をイメージしやすく、デザインの調整にも便利なことから、モダンなWeb制作で広く使われています。

HSLモデルの3つの要素

  • 色相（Hue）：0〜360度の角度で色合いを表します。0が赤、120が緑、240が青に対応します。
  • 彩度（Saturation）：0%はグレー（無彩色）、100%は最も鮮やかな純色になります。
  • 輝度（Lightness）：0%は黒、50%は標準的な明るさ、100%は白になります。

使用例

以下のコードでは、hsl() 関数を使って見出しの背景色を赤と青に設定しています。

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        background-color: hsl(0, 100%, 50%);
      }
      h2 {
        background-color: hsl(192, 89%, 48%);
      }
    </style>
  </head>
  <body>
    <h1>赤い背景（Red Background）</h1>
    <h2>青い背景（Blue Background）</h2>
  </body>
</html>

コードの解説

hsl(0, 100%, 50%) は、色相0度（赤）・彩度100%（最も鮮やか）・輝度50%（標準）を意味し、結果として純粋な赤が表示されます。一方、hsl(192, 89%, 48%) はシアン寄りの青みのある色を生成します。

透明度を指定する hsla()

色の透明度（アルファ値）も同時に指定したい場合は、第4引数を追加できる hsla() 関数を使用します。

background-color: hsla(192, 89%, 48%, 0.5); /* 50%の半透明 */

このように hsl() 関数を使えば、数値の調整だけで色味や明るさを細かくコントロールできるため、カラーパレットの設計やテーマカラーの管理が格段にしやすくなります。

  1. CSSのrotate()関数の使い方 – 要素を回転させる方法を解説

    CSSのrotate()関数とは？CSSのrotate()関数は、要素を回転させるための変換関数です。transformプロパティと組み合わせて使用し、指定した角度だけ要素を回転させることができます。引数には回転角度を指定します。単位はdeg（度）やrad（ラジアン）などが利用可能で、正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。指定できる角度の単位deg（度）：360degで1回転rad（ラジアン）：約6.28rad（2π）で1回転grad（グラード）：400gradで1回転turn（回転数）：1turnで1回転使用例以下の例では、複数の段落要素を表示し、そのうちの

  2. CSS rgba()関数の使い方を解説！透明度付きの色指定方法と実例

    rgba()関数とはCSSのrgba()関数は、赤（Red）、緑（Green）、青（Blue）の3原色に加えて、アルファ（Alpha）チャンネルによる透明度を含めたRGBAカラーバリューを定義するための関数です。アルファ値は色の不透明度を表し、0.0〜1.0の範囲の数値で指定します。1.0が完全に不透明な状態、0.0が完全に透明な状態を意味します。基本的な構文は以下のとおりです。rgba(red, green, blue, alpha)red / green / blue：各色成分を0〜255の整数、またはパーセンテージで指定します。alpha：不透明度を0.0（完全に透明）〜1.0（完全に不