[257] CSS における <color> で利用できる構文 rgb()、#rgb、 #rrggbb は、 RGB値 (赤、緑、青の光の三原色の値の組) による色の指定を表します。

仕様書

#rrggbb

[265] # の後に十六進数字6桁が続く形式 (#rrggbb) は、赤、緑、青の値を十六進数字2桁ずつ順に並べたものとなっています。 各色 00 から FF まで256段階を表現できます。

[270] 大文字と小文字は区別されません。

# の省略

[282] HTML では古くから # が省略されることがあり、 仕様上は認められていなかったものの、多くの利用者エージェントは省略しても意図した通りに解釈していました。 現在ではこれは単純色を指定する属性値についての利用者エージェントの正式な動作となっています。

[283] もっとも、著者が # を省略することは現在でも認められていません。

#rgb

[262] # の後に十六進数字3桁が続く形式 (#rgb) は、3桁の数字をそれぞれ重ねた物 (#rrggbb) と等価です。 >>256

[263] 例えば #fb0 は #ffbb00 と等価です。 >>256[264] 従って白は #ffffff とも #fff とも表すことができ、 表示装置の色深度に依存することなく表現できます。 >>256

[271] 大文字と小文字は区別されません。

rgb()

[266] RGB 値の関数的記法では、

... という構文で色を表します。整数値の 0 と百分率値の 0% (と十六進数表記の 00)、 整数値の 255 と百分率値の 100% (と十六進数表記の FF) が対応します。 >>256

[267] 従って白は rgb(255,255,255), rgb(100%,100%,100%), #fff, #ffffff などと表せます。

[281] 値は通常は sRGB の色空間の範囲内の 0 から 255 までとされますが、 仕様上はその範囲外の値とすることも認められています。

[268] 整数値や百分率値の前後には空白を入れることができます。 >>256

[269] しかし ( の前や % の前には入れてはいけません。

[272] 関数名では大文字と小文字は区別されませんし、 escape することもできます。

色空間

[273] RGB値は sRGB 色空間における色を表します。 >>256

[274] 実際には利用者エージェントがどの程度その色を忠実に再現できるかはそれぞれに依って構いません。 >>256

[275] 装置の色域gamutが分かっている場合には、 その範囲内にくりぬくclipか写像mapするかするべきです。 利用者エージェントは赤、緑、青の各色の指定をその装置において対応している範囲内に収まるように変更しなければなりません。 利用者エージェントはより高品質な色域間の変換を施しても構いません。 いずれにせよ、 CSS の仕様書においてはくりぬきの正確な動作は定義されていません。 >>256

[276] 一般的な CRT モニターで sRGB と同じ色域を持つものでは、 整数値で 0 から 255 までの範囲である必要があり、

... はいずれもくりぬかれて rgb(255,0,0) と指定したのと同じこととなります。 >>256

[277] 印刷機など他の装置では違った色域を持っており、 sRGB でいう 0 から 255 までの範囲の外の色を表すことができたり、その中の色を表すことができなかったりしますが、 その場合も適当に装置の色域内に置き換えられます。

[278] このくりぬきが CSS の解釈のどの時点で行われるのかは仕様上不明確です。 一般的なWebブラウザーでは CSSOM の時点で既にくりぬかれた後の値になっているようです。

構文解析

実例

[1] rgb(1,2,3) http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20rgb(1%2C2%2C3)%3B%0A%7D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element

(名無しさん)

[2] rgb(1,2,-3) http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20rgb(1%2C2%2C-3)%3B%0A%7D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element

(名無しさん)

[3] >>2 Firefox 2, Opera 9, WinIE 6 のいずれも、負の数は零に正規化した上で CSSOM 上に現れます。 (名無しさん)

[4] rgb(1,2,300) http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20rgb(1%2C2%2C300)%3B%0A%7D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element

(名無しさん)

[5] >>4 Firefox 2, Opera 9, WinIE 6 のいずれでも、255 以上の数は 255 に正規化した上で CSSOM 上に現れます。 (名無しさん)

[6] rgb(1,2,3.6) http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20rgb(1%2C2%2C3.6)%3B%0A%7D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element

(名無しさん)

[7] >>6 は CSS 3 http://www.w3.org/TR/2003/CR-css3-color-20030514/#rgb-color によれば rgb() 関数で使えるのは整数なので、 前方互換構文解析規則により無視するのが正しいです。 (名無しさん)

[8] >>6 は Firefox 2 では無視されますが、Opera 9 と WinIE 6 では CSSOM の段階で切り捨てられます (負の数は零になります)。 (名無しさん)

[9] rgb(1,2,3%) http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20rgb(1%2C2%2C3%25)%3B%0A%7D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element

(名無しさん)

[10] >>9 CSS 2.1, CSS 3 によれば3整数か3百分率値のどちらかしか認められていないので、混在しているこれは無視するのが正しいです。 (名無しさん)

[11] >>9 は Firefox 2 と Opera 9 に無視されますが、 WinIE 6 には無視されません (CSSOM 上の値は整数に正規化されます (3% = 7))。 (名無しさん)

[12] rgb(1%,2%,3%) http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20color%3A%20rgb(1%25%2C2%25%2C3%25)%3B%0D%0A%7D%0D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element

(名無しさん)

[13] >>12 Opera 9, Firefox 2, WinIE 6 とも、 CSSOM 上は整数表記 (Opera 9 は十六進数表記) になります。 (名無しさん)

[14] >>12 3ブラウザとも、負の百分率値は 0 に、 100% 以上の百分率値は 255 になるようです。 (名無しさん)

[15] rgb(0%,0.4%,0%) http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20rgb(0%25%2C0.4%25%2C0%25)%3B%0A%7D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element

(名無しさん)

[16] >>15 Firefox 2 と WinIE 6 は実数に変換してから整数に切り捨てているようです。この例では 1 になります。 Opera 9 は百分率値の段階で切り捨ててから整数に変換しているようです。 この例では 0 になります。 (名無しさん)

[17] rgb(1,2,3; http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20color%3A%20green%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20color%3A%20rgb(255%2C%200%2C%200%3B%0D%0A%20%20color%3A%20red%3B%0D%0A%20%20)%3B%0D%0A%7D%0D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element (名無しさん)

[18] rgb(1,2,3; http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20color%3A%20green%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20color%3A%20rgb(255%2C%200%2C%200%3B%0D%0A%20%20color%3A%20red%3B%0D%0A%20%20)%3B%0D%0A%7D%0D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element (名無しさん)

[19] rgb(1,2,3; http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20color%3A%20green%3B%0D%0A%7D%0D%0Ap%20%7B%0D%0A%20%20color%3A%20rgb(255%2C%200%2C%200%3B%0D%0A%20%20color%3A%20red%3B%0D%0A%20%20)%3B%0D%0A%7D%0D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element (名無しさん)

[20] >>19 Firefox 2, WinIE 6, Opera 9 のいずれも、 括弧の対応関係は無視しているようで、赤になります。 (名無しさん)

[21] rgb(1,2,3 (スタイル・シート末) http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20red%3B%0A%7D%0Ap%20%7B%0A%20%20color%3A%20rgb(0%2C%20255%2C%200;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element

(名無しさん)

[22] >>21 Opera 9 は正しく括弧を補います (緑。) が、 Firefox 2 と WinIE 6 は宣言を無視するようです (赤)。

例

これらはいずれも同じ色 (赤) を表します。 >>256

歴史

[280] #rrggbb は古くから HTML の色を値とする属性で使うことができました。 それ以外は CSS1 で追加されました。Webブラウザーによっては CSS1 で追加された形式を HTML で使うことができることがあります。

関連

[279] RGB値に更にα値を組み合わせた rgba() 関数もあります。