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

CSS3のHSLカラープロパティとは？色相・彩度・輝度による色指定の基本と実例

CSS3では、新しい色指定方法として「HSL」カラーモデルが利用できます。HSLとは「Hue（色相）」「Saturation（彩度）」「Lightness（輝度）」の頭文字を取ったもので、人間の感覚に近い形で直感的に色を指定できるのが大きな特徴です。

HSLの各構成要素

  • Hue（色相）： カラーホイール上の角度（0〜360度）で色合いを表します。0度は赤、120度は緑、240度は青に対応します。
  • Saturation（彩度）： 色の鮮やかさを0%〜100%のパーセンテージで指定します。100%が最も鮮やかな状態で、0%に近づくほど灰色へと変化します。
  • Lightness（輝度）： 色の明るさを0%〜100%のパーセンテージで指定します。0%は黒、100%は白、50%がその色の標準的な明るさとなります。

記述例

以下の例では、HSLカラープロパティを使用して、同じ緑系の色でも輝度が異なる3つの背景色を定義しています。

<html>
   <head>
      <style>
         #g1 {background-color:hsl(120, 100%, 50%);}
         #g2 {background-color:hsl(120,100%,75%);}
         #g3 {background-color:hsl(120,100%,25%);}
      </style>
   </head>
   <body>
      <p>HSL colors:</p>
      <p id = "g1">Green</p>
      <p id = "g2">Normal Green</p>
      <p id = "g3">Dark Green</p>
   </body>
</html>

表示結果のポイント

このコードをブラウザで表示すると、3つの段落それぞれに異なる緑色の背景が適用されます。

  • #g1： 輝度50%の標準的な鮮やかな緑（hsl(120, 100%, 50%)）
  • #g2： 輝度75%の明るめの緑（hsl(120, 100%, 75%)）
  • #g3： 輝度25%の暗い緑（hsl(120, 100%, 25%)）

このようにHSLを使えば、同じ色相を保ちながら明るさだけを調整したカラーバリエーションを簡単に作成できます。デザインの統一感を持たせたい場合などに非常に便利な指定方法なので、ぜひ活用してみてください。

  1. CSS3のRGBA・HSL・HSLAカラー値の使い方を徹底解説

    CSS3では、従来のカラーネームや16進数（HEX）に加えて、より柔軟な色指定の方法が複数導入されました。その代表が RGBA、HSL、HSLA の3つのカラー値です。それぞれの特徴と使い方を、実際のコード例とともに詳しく見ていきましょう。RGBAカラー値とはRGBA は「Red（赤）」「Green（緑）」「Blue（青）」「Alpha（アルファ）」の4つの要素で構成される色指定方法です。RGBはそれぞれ0〜255の数値で色の強さを表し、Alphaは色の不透明度（透明度）を指定します。Alphaの値は 0.0〜1.0 の範囲で指定します。1.0が完全な不透明（透過なし）、0.0が完全な透明を意

  2. CSS3のRGBAカラー値とは？透明度の指定方法を実例付きで解説

    RGBAカラー値とは RGBAは、Red（赤）・Green（緑）・Blue（青）・Alpha（アルファ）の頭文字を組み合わせたCSS3の色指定形式です。従来のRGBカラーモデルに加えて、Alphaパラメータで色の不透明度（透過度）を細かく制御できるのが最大の特徴です。 アルファ値は0.0〜1.0の範囲の数値で指定します。 ・1.0 … 完全に不透明（通常のRGBと同じ見え方） ・0.5 … 半透明 ・0.0 … 完全に透明（見えなくなる） このように、同じ色でもアルファ値を変えるだけで、背後にある要素や背景が透けて見えるエフェクトを簡単に実現できます。 アルファ値による透明度の違い 下の画像