12.HTML カラーについて

HTMLの色は、定義済みの色の名前、またはRGB、HEX、HSL、RGBA、HSLAの値を使用して指定されます。

カラー名

HTMLでは、色は色の名前を使って指定できます。:

HTML では 140の標準色名をサポートしています。

背景色

HTML要素の背景色を設定できます。:

テキストの色

テキストの色を設定することができます:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ボーダの色

境界線の色を設定できます。:

Hello World

Hello World

Hello World

カラー値

HTMLでは、色はRGB値、HEX値、HSL値、RGBA値、およびHSLA値を使用して指定することもできます。:

色名「トマト」と同じ “Tomato”色:

色名「トマト」と同じだが、50％透明:

RGB値

HTMLでは、次の式を使って色をRGB値として指定できます。:

RGB(red, green, blue)

各パラメータ（赤、緑、青）は、0から255の間で色の強度を定義します。

たとえば、rgb（255、0、0）は赤で表示されます。赤は最大値（255）に設定され、それ以外は0に設定されているためです。

黒を表示するには、次のようにすべてのカラーパラメータを0に設定します。rgb（0、0、0）。

白を表示するには、すべてのカラーパラメータを次のように255に設定します。rgb（255、255、255）。

グレーの色合いは、3つの光源すべてに等しい値を使用して定義されることがよくあります。:

16進数の価

HTMLでは、色は次の形式の16進値を使用して指定できます。:

#rrggbb

ここで、rr（赤）、gg（緑）、bb（青）は、00からffの間の16進数値です（10進の0から255と同じ）。

たとえば、＃ff0000は赤で表示されます。赤は最高値（ff）に設定され、その他は最低値（00）に設定されているためです。

グレーの色合いは、3つの光源すべてに等しい値を使用して定義されることがよくあります。:

HSL 値

HTMLでは、色相、彩度、明度（HSL）を使って色を指定できます。:

hsl(色相, 彩度, 明度)

色相は0から360までのカラーホイール上の度数です。0は赤、120は緑、そして240は青です。

彩度はパーセント値で、0％はグレーの色合い、100％はフルカラーです。

明るさもパーセンテージで、0％は黒、50％は明るでも暗でも、100％は白

飽和してしまう時

彩度は色の強さとして説明できます。

100％は純粋な色、灰色の色合いはありません

50％は50％グレーですが、それでも色は見えます。

0％は完全にグレーです。色が見えなくなります。

明るさ

色の明るさは、その色にどれだけの明るさを与えたいかで表すことができます。0％は光がないことを意味し（黒）、50％は50％を意味します（暗いも明るくもない）100％は完全な明るさ（白）を意味します。

グレーの色合いは、色相と彩度を0に設定し、明度を0％から100％に調整することで定義されます。:

RGBA 値

RGBAカラー値は、アルファチャンネルを使用したRGBカラー値の拡張で、カラーの不透明度を指定します。

RGBAカラー値は次のように指定されます。:

rgba(red, green, blue,
alpha)

alphaパラメータは、0.0（完全に透明）から1.0（まったく透明ではない）の間の数値です。:

HSLA 値

HSLAカラー値は、アルファチャンネルを使用したHSLカラー値の拡張で、カラーの不透明度を指定します。

HSLAカラー値は次のように指定されます。:

hsla(hue, saturation, lightness, alpha)

alphaパラメータは、0.0（完全に透明）から1.0（まったく透明ではない）の間の数値です。: