#rgb

#rgb

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

[8] >>6Firefox 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] >>9Firefox 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() 関数もあります。