CSS3 カラー

CSS3 では、従来のカラー指定方法に加え、透明度をサポートする RGBA や、色彩学に基づいた HSL/HSLA モデルが導入されました。これにより、デザインの柔軟性が飛躍的に向上しています。

1. RGBA カラー

RGBA カラー値は、RGB カラーモデルの拡張であり、色の不透明度を指定するアルファチャンネル（Alpha channel）が追加されています。

1.1 RGBA の構文

RGBA カラーは以下のように指定します。
rgba(red, green, blue, alpha)

alpha パラメータは、0.0（完全に透明）から 1.0（完全に不透明）の間の数値で指定します。

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* 不透明度 30% の赤 */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* 不透明度 30% の緑 */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* 不透明度 30% の青 */

2. HSL カラー

HSL とは、色相（Hue）、彩度（Saturation）、**輝度（Lightness）**を表します。円柱座標表現を用いることで、人間にとって直感的な色の指定が可能になります。

2.1 HSL の構文

hsl(hue, saturation, lightness)

• Hue（色相）: 色相環上の度数（0 から 360）です。0 は赤、120 は緑、240 は青となります。
• Saturation（彩度）: パーセンテージ値です。0% はグレーの陰影、100% はフルカラーです。
• Lightness（輝度）: パーセンテージ値です。0% は黒、50% は標準（暗くも明るくもない）、100% は白になります。

#p1 {background-color: hsl(120, 100%, 50%);}   /* 標準的な緑 */
#p2 {background-color: hsl(120, 100%, 75%);}   /* 明るい緑 */
#p3 {background-color: hsl(120, 100%, 25%);}   /* 暗い緑 */
#p4 {background-color: hsl(120, 60%, 70%);}    /* パステル調の緑 */

3. HSLA カラー

HSLA カラー値は、HSL カラーモデルの拡張であり、RGBA と同様に不透明度を指定するアルファチャンネルが追加されています。

3.1 HSLA の構文

hsla(hue, saturation, lightness, alpha)

alpha パラメータは、0.0（完全に透明）から 1.0（完全に不透明）の間の数値で指定します。

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* 不透明度 30% の緑 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* 不透明度 30% の明るい緑 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* 不透明度 30% の暗い緑 */

4. Opacity プロパティ

opacity プロパティは、要素全体の透明度を設定するために使用されます。

4.1 Opacity の使用例

値は 0.0（完全に透明）から 1.0（完全に不透明）の範囲で指定します。

div {
  background-color: red;
  opacity: 0.5; /* 要素全体（子要素を含む）を 50% の不透明度にする */
}

注意点: opacity プロパティを使用すると、その要素内にあるすべてのテキストや子要素も同様に透明になります。背景のみを透明にしたい場合は、前述の RGBA または HSLA を使用するのがベストプラクティスです。

5. カラープロパティ一覧