備忘録的プログラミングリファレンス

CSS Color

 CSSにおける色の指定にはRGB ColorとHSL Colorがあり、さらにColor名で指定することができます。

 以下は、文字色をfloralwhite色に指定した、16進数、rgb関数、hsl関数、Color名での表記です。 16進数、rgb関数、hsl関数では、透明度も指定することができます。

16進数
color: #fffaf0;
rgb関数
color: rgb(255, 250, 240);
hsl関数
color: hsl(40, 100%, 97%);
Color名
color: floralwhite;

 RGB Colorは赤(R)、緑(G)、青(B)の成分を指定、HSL Colorは色相(H)、彩度(S)、明度(L)を指定します。それぞれ透過度alphaがオプションで設定できます。

 RGB Colorは16進数表記#RGB[A]と、関数表記rgb(R,G,B[,A])ができます。

種類表記
RGB Color
Hexadecimal#RRGGBB[AA]、#RGB[A]#808080
RGB、RGBArgb(R,G,B[,A])、rgb(R G B[ A])rgb(255,100,0,0.5)
HSL Color
HSLhsl(H,S,L[,A])hsl(30, 100%, 50%,0.15)
Color名
Colorキーワード、Color名色の名称white、gray、blackなどsilver

RGB Color

 RGB Colorは赤(R)、緑(G)、青(B)の成分を指定します。

 rgba()はrgb()の別名です。rgba()は透過度alpha値が必要になります。

16進数表記(Hexadecimal)

#0000ff88   /* 青色で透過度50% */

 16進数表記には、#RRGGBB[AA]、#RGB[A]があります。赤(R)、緑(G)、青(B)をそれぞれ16進数(0–9, A–F)で設定します。(A)は透過度alphaでオプションです。

 #RRGGBB[AA]は#RGB[A]より細かく設定できます。

関数表記(RGB)

rgb(0, 0, 255, 0.5)   /* 青色で透過度50% */

 RGB関数表記には、rgb(R,G,B[,A])、rgb(R G B[ A])があります。赤(R)、緑(G)、青(B)をそれぞれ数値(0-255)またはパーセント(%)で設定します。(A)は透過度alphaでオプションでパーセントまたは1を100%とした0から1までの数値で設定します。

 rgb(R,G,B[,A])とrgb(R G B[ A])の違いはカンマ","で区切るか、スペース" "で区切るかの違いです。

HSL Color

 HSL Colorは色相(H)、彩度(S)、明度(L)を指定します。

 hsla()はhsl()の別名です。hsla()は透過度alpha値が必要になります。

関数表記(HSL)

hsl(240, 100%, 50%)   /* 青色で透過度50% */

 HSL関数表記には、hsl(H,S,L[,A])があります。

 色相(H)はCSS Color Module Level 4で定義されている色相環の角度をdeg、 rad、 grad、 turnの単位で設定します。単位のない数値はdegとして扱われます。

 彩度(S)、明度(L)をパーセント(%)で設定します。彩度(S)が100%で純色です。0%に近づくほど無彩色(白、黒、灰色)になります。明度(L)が50%で純色で100%ほど明るく、0%に近づくほど暗くなります。

Colorキーワード、Color名

 Colorキーワード、Color名は、色の名称で設定する方法です。以下のように、white、gray、blackなどといった名称を使います。

 以下に代表的な色のみを示します。

Colorキーワード、Color名一覧

キーワード
black#000000 
gray#808080 
silver#c0c0c0 
white#ffffff 
red#ff0000 
yellow#ffff00 
blue#0000ff 
green#008000 

Example