[257] CSS における <color> で利用できる構文
rgb()、#rgb、
#rrggbb
は、 RGB値 (赤、緑、青の光の三原色の値の組) による色の指定を表します。
#rrggbb[265] # の後に十六進数字6桁が続く形式
(#rrggbb) は、赤、緑、青の値を十六進数字2桁ずつ順に並べたものとなっています。
各色 00 から FF まで256段階を表現できます。
# の省略[282] HTML では古くから # が省略されることがあり、
仕様上は認められていなかったものの、多くの利用者エージェントは省略しても意図した通りに解釈していました。
現在ではこれは単純色を指定する属性値についての利用者エージェントの正式な動作となっています。
#rgb[262] # の後に十六進数字3桁が続く形式
(#rgb) は、3桁の数字をそれぞれ重ねた物 (#rrggbb)
と等価です。 >>256
rgb()... という構文で色を表します。整数値の 0 と百分率値の 0% (と十六進数表記の 00)、 整数値の 255 と百分率値の 100% (と十六進数表記の FF) が対応します。 >>256
[281] 値は通常は sRGB の色空間の範囲内の 0 から 255 までとされますが、 仕様上はその範囲外の値とすることも認められています。
[273] RGB値は sRGB 色空間における色を表します。 >>256
[274] 実際には利用者エージェントがどの程度その色を忠実に再現できるかはそれぞれに依って構いません。 >>256
[275] 装置の色域が分かっている場合には、 その範囲内にくりぬくか写像するかするべきです。 利用者エージェントは赤、緑、青の各色の指定をその装置において対応している範囲内に収まるように変更しなければなりません。 利用者エージェントはより高品質な色域間の変換を施しても構いません。 いずれにせよ、 CSS の仕様書においてはくりぬきの正確な動作は定義されていません。 >>256
... はいずれもくりぬかれて rgb(255,0,0)
と指定したのと同じこととなります。 >>256
[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 は宣言を無視するようです (赤)。
[280] #rrggbb は古くから HTML の色を値とする属性で使うことができました。
それ以外は CSS1 で追加されました。Webブラウザーによっては CSS1
で追加された形式を HTML で使うことができることがあります。
#fb0は#ffbb00と等価です。 >>256