Edit

Page

Page title:

Page body:

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

* 仕様書

- [256] [CITE@en[CSS Color Module Level 3]] ([TIME[2011-06-07 21:54:38 +09:00]] 版) <http://www.w3.org/TR/2011/REC-css3-color-20110607/#rgb-color>

* [CODE(CSS)[#[VAR[rrggbb]]]]

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

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

** [CODE(char)[#]] の省略

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

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

* [CODE(CSS)[#[VAR[rgb]]]]

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

;; [263] 例えば [CODE(CSS)[#fb0]] は [CODE(CSS)[#ffbb00]] と等価です。 [SRC[>>256]]

;; [264] 従って[[白]]は [CODE(CSS)@en[#ffffff]] とも [CODE(CSS)@en[#fff]] とも表すことができ、
[[表示装置]]の[[色深度]]に依存することなく表現できます。 [SRC[>>256]]

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

* [CODE(CSS)@en[rgb()]]

[266] [[RGB]] 値の[[関数的記法]]では、
- [CODE(CSS)@en[rgb(]]
- 3つの[[整数値]]、または3つの[[百分率値]]を[[読点]]で区切ったもの
- [CODE(CSS)[)]]

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

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

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

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

;; [269] しかし [CODE(CSS)@en[(]] の前や [CODE(CSS)@en[%]] の前には入れてはいけません。

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

* 色空間

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

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

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

;; [276] 一般的な [[CRT]] [[モニター]]で [[sRGB]] と同じ[[色域]]を持つものでは、
[[整数値]]で 0 から 255 までの範囲である必要があり、
- [CODE(CSS example code)[rgb(300,0,0)]]
- [CODE(CSS example code)[rgb(255,-10,0)]]
- [CODE(CSS example code)[rgb(110%, 0%, 0%)]]

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

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

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

* 構文解析

** 実例

[1]
[CODE(CSS example)@en[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]
[CODE(CSS example)@en[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]
[CODE(CSS example)@en[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]] のいずれでも、[CODE(CSS)[255]]
以上の[[数]]は [CODE(CSS)[[[255]]]] に[[正規化]]した上で [[CSSOM]]
上に現れます。
([[名無しさん]])

[6]
[CODE(CSS example)@en[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>
によれば [CODE(CSS)@en[[[rgb]]()]] [[関数]]で使えるのは[[整数]]なので、
[[前方互換構文解析規則]]により[[無視]]するのが正しいです。
([[名無しさん]])

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

[9]
[CODE(CSS example invalid)@en[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]] 上の値は[[整数]]に[[正規化]]されます 
([CODE(CSS)@en[3%]] = [CODE(CSS)@en[7]]))。
([[名無しさん]])

[12]
[CODE(CSS example)@en[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ブラウザとも、[[負]]の[[百分率値]]は [CODE(CSS)[[[0]]]] に、
[CODE(CSS)[100%]] [[以上]]の[[百分率値]]は [CODE(CSS)[[[255]]]] になるようです。
([[名無しさん]])

[15]
[CODE(CSS)@en[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]] は[[実数]]に変換してから[[整数]]に[[切り捨て]]ているようです。この例では [CODE(CSS)[[[1]]]] になります。
[[Opera]] 9 は[[百分率値]]の段階で[[切り捨て]]てから[[整数]]に変換しているようです。
この例では [CODE(CSS)[[[0]]]] になります。
([[名無しさん]])

[17]
[CODE(CSS)@en[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]
[CODE(CSS)@en[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]
[CODE(CSS)@en[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]
[CODE(CSS)@en[[[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]] は[[宣言]]を[[無視]]するようです ([[赤]])。

* 例

- [258] [CODE(CSS example code)[#f00]]
- [259] [CODE(CSS example code)[#ff0000]]
- [260] [CODE(CSS example code)[rgb(255,0,0)]]
- [261] [CODE(CSS example code)[rgb(100%, 0%, 0%)]]

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

* 歴史

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

* 関連

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

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)