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

CSS3のHSLカラー値の使い方を徹底解説！色相・彩度・輝度による色指定の基本

CSS3では、要素の背景色や文字色を指定する際に、HSL(Hue:色相、Saturation:彩度、Lightness:輝度)という形式を使用できます。従来のRGBや16進数カラーコードと比べて、「色のイメージ」に基づいて直感的に色を指定できるのが大きな特徴です。

HSLの各値の意味

hsl()関数は「hsl(色相, 彩度, 輝度)」の順で3つの値を指定します。

  • 色相(Hue):0〜360の角度で指定します。0または360が赤、120が緑、240が青に対応し、その間の値で色が滑らかに変化します。
  • 彩度(Saturation):パーセンテージ(%)で指定します。100%が最も鮮やかな色、0%は灰色になります。
  • 輝度(Lightness):パーセンテージ(%)で指定します。50%が標準的な明るさ、0%は黒、100%は白になります。

HSLカラー値の記述例

それでは、実際にHSLカラー値を使用したサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsl(150, 100%, 50%);}
#demo2 {background-color: hsl(150, 100%, 50%);}
#demo3 {background-color: hsl(140, 100%, 40%);}
#demo4 {background-color: hsl(120, 100%, 40%);}
#demo5 {background-color: hsl(120, 100%, 30%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>

表示結果

CSS3のHSLカラー値の使い方を徹底解説！色相・彩度・輝度による色指定の基本

この例では、#demo1と#demo2に同じ「hsl(150, 100%, 50%)」を指定しているため、同じ明るい緑色で表示されます。一方、#demo3から#demo5にかけて色相や輝度の値を変えており、値の違いによってどのように見た目が変化するかを確認できます。また、比較用として#demo6には半透明の色を指定できるrgba()関数(最後の値が不透明度)も使用しています。

まとめ

HSLカラー値を使うと、「緑ベースでもう少し暗くしたい」「彩度を抑えた落ち着いた色にしたい」といった調整が数値の変更だけで簡単に行えます。Webデザインにおいて配色を微調整する場面で非常に便利な機能なので、ぜひ活用してみてください。なお、半透明の色を指定したい場合は、アルファ値(透明度)を追加したhsla()関数を使用することも可能です。

  1. CSS3でキーフレームアニメーションを定義する方法

    CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームとは、アニメーションの途中の状態（中間ステップ）を制御するための仕組みです。開始時点と終了時点のスタイルを指定することで、その間の変化をブラウザが自動的に補間してくれます。以下に、CSS3でキーフレームを定義するコード例を示します。コード例<!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;

  2. Matplotlibでデータ値を色情報に変換する方法をわかりやすく解説

    Matplotlibでは、数値データの値に応じて色を割り当てることで、散布図などを視覚的に分かりやすく表現できます。この記事では、データ値をカラーマップを使って色情報に変換し、プロットに反映させる具体的な手順をサンプルコードとともに解説します。 データ値を色情報に変換する基本の手順 図のサイズを設定し、サブプロット間および周囲の余白（パディング）を調整します。 plt.get_cmap() を使ってカラーマップのインスタンスを取得します。名前が指定されない場合は、rc設定のデフォルト値が使用されます。 色情報に変換する対象となるランダムな数値データを作成します。 プロット用のランダムなデータ