HTML 速習チュートリアル

HTML カラー

HTMLでは、定義済みのカラー名、またはRGB、HEX、HSL、RGBA、HSLA値を使用して色を指定します。

1. カラー名 (Color Names)

HTMLでは、カラー名を使用して色を指定できます。

TomatoOrangeDodgerBlueMediumSeaGreen
GraySlateBlueVioletLightGray

HTMLは140種類の標準カラー名をサポートしています。

2. 背景色 (Background Color)

HTML要素に対して背景色を設定することができます。

<h1 style="background-color:Tomato;">トマト</h1>
<p style="background-color:DodgerBlue;">ドジャーブルー</p>
<p style="background-color:MediumSeaGreen;">ミディアムシーグリーン</p>

3. テキストの色 (Text Color)

テキストの色を設定することも可能です。

<h1 style="color:Tomato;">こんにちは</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

4. 境界線の色 (Border Color)

要素の境界線（ボーダー）に色を設定できます。

<h1 style="border:2px solid Tomato;">トマトの境界線</h1>
<h1 style="border:2px solid DodgerBlue;">ドジャーブルーの境界線</h1>
<h1 style="border:2px solid MediumSeaGreen;">ミディアムシーグリーンの境界線</h1>

5. カラー値 (Color Values)

HTMLでは、カラー名の他に、数値を使用して色を指定することもできます。

  • RGB (Red, Green, Blue)
  • HEX (Hexadecimal / 16進数)
  • HSL (Hue, Saturation, Lightness / 色相、彩度、輝度)
  • RGBA (RGB + Alpha / 透明度)
  • HSLA (HSL + Alpha / 透明度)

以下の3つの要素は、すべて同じ色（Tomato）を表しています。

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

また、透明度を加えた以下の2つも同じ色ですが、50%の透過度が設定されています。

<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

5.1 RGB 値 (RGB Values)

HTMLにおいて、色は rgb(red, green, blue) という計算式で指定できます。
各パラメータ（red、green、blue）は、色の強度を 0 から 255 の間で定義します。

例えば、rgb(255, 0, 0) は赤が最大値に設定され、他が0であるため、鮮やかな赤色として表示されます。
黒を表示するには、すべてのパラメータを0に設定します：rgb(0, 0, 0)。
白を表示するには、すべてのパラメータを255に設定します：rgb(255, 255, 255)。

5.2 HEX 値 (HEX Values)

HTMLでは、色は #RRGGBB 形式の16進数値を使用して指定することもできます。
ここで、RR（赤）、GG（緑）、BB（青）は 00 から ff（10進数の0-255に相当）の間の16進数値です。

例えば、#FF0000 は赤が最大値で他が0であるため、赤色として表示されます。

5.3 HSL 値 (HSL Values)

HSLは、色相（Hue）、彩度（Saturation）、輝度（Lightness）を表します。
hsl(hue, saturation, lightness) という形式で指定します。

  1. 色相 (Hue)：色相環上の度数（0から360）。0は赤、120は緑、240は青です。
  2. 彩度 (Saturation)：パーセント値。0%はグレーの影、100%はフルカラーです。
  3. 輝度 (Lightness)：パーセント値。0%は黒、50%は明るすぎず暗すぎない状態、100%は白です。

6. RGBA と HSLA (RGBA & HSLA Values)

RGBAおよびHSLAは、既存の色空間にアルファ・チャンネル（Alpha channel）を追加したもので、色の不透明度を指定できます。

rgba(red, green, blue, alpha)hsla(hue, saturation, lightness, alpha)

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