CSS カラー

Volardev 編集部 April 12, 2026

1. カラー名 (Color Names)

CSS では、カラー名を使用して色を指定できます。現在、140 種類の標準的なカラー名がサポートされています。

2. 背景色 (Background Color)

HTML 要素の背景色は、background-color プロパティを使用して設定できます。

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

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

テキストの色は、color プロパティを使用して設定できます。

<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation...</p>

^{4. ボーダーの色 (Border Color)}

要素の境界線（ボーダー）の色は、border プロパティを使用して設定できます。

<h2 style="border:2px solid Tomato;">Tomato</h2>
<h2 style="border:2px solid DodgerBlue;">DodgerBlue</h2>
<h2 style="border:2px solid Violet;">Violet</h2>

5. カラー値 (Color Values)

CSS では、カラー名の他にも、以下の形式で色を指定することが可能です。

RGB 値
HEX 値
HSL 値
RGBA 値 (透明度対応)
HSLA 値 (透明度対応)

以下の 3 つの <h1> 要素は、すべて同じ色（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>

また、透明度を加えた指定も可能です（0.0 は完全に透明、1.0 は完全に不透明）。

<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 (Red, Green, Blue): 光の三原色を 0 から 255 の数値で指定します。
HEX (Hexadecimal): 16進数を使用して #RRGGBB の形式で指定します。Web 制作で最も一般的に使用される形式です。
HSL (Hue, Saturation, Lightness): 色相、彩度、輝度で指定します。直感的に色を調整しやすいため、デザインシステムなどで重宝されます。
Alpha (A): RGBA や HSLA に含まれる「アルファ値」は、色の透明度（オパシティ）を制御するために使用されます。