CSS3

CSS関数

color()

  編集:2022.07.14 by T.A.

[Edge]⛌。→mdn(en-US)

有プロファイル色の指定法。

color() 関数により、ある特定の指定した色空間内の色を指定できるようになる

color( <colorspace-params> [ / <alpha-value> ]? )
<colorspace-params>
<predefined-rgb-params>
| <xyz-params>
<predefined-rgb-params>
<predefined-rgb> [<number> | <percentage> | none]{3}
<predefined-rgb>
srgb
| srgb-linear
| display-p3
| a98-rgb
| prophoto-rgb
| rec2020
<xyz-params>
<xyz-space> [<number> | none]{3}
<xyz-space>
xyz
| xyz-d50
| xyz-d65
<number>
<percentage>

color() 関数は、明示的に与えられた色空間内の色を指定する、一連のパラメーターをとる。

この関数は、以下に述べる 無効な色、それ以外の 妥当な色 どちらかを表現する。

色は、妥当な色であっても、出力機器(スクリーン/投影機/印刷機など)が生産できる色の範囲の外側になることもある。そのような色は、(出力機器用の)色空間の 色域外(out of gamut)にあるとされる。【その否定は“色域内(in-gamut/in gamut)”と称される。】

色域外にある色には、[0 以上 1 以下/0% 以上 100% 以下]の範囲に入らない成分値がある。それは、無効な色ではなく、代わりに、表示用には[相対色計量意図を利用して色域対応付けが施され、算出値の時点で、この範囲に入る]ようにされる。

妥当な色は、当の出力機器(スクリーン/印刷機)用の[色域内、色域外]どちらかにある。

¶説明を省く

rec2020 用の色域内にある,ごく鮮やかな lime 色:
color(rec2020 0.42053 0.979780 0.00579);

その色は、LCH においては:

lch(86.6146% 160.0000 136.0088);

その色は、display-p3 においては:

color(display-p3 -0.6112 1.0079 -0.2192);

それは、display-p3 用の色域外にある(red、blue は負であり、green は 1 より大きい)。利用中のスクリーンが display-p3 のとき、その色は:

妥当な色であり、
rec2020 用の色域内にはあるが、
(利用中のディスプレイ用の)色域外にあるので、
表示し得ない

表示用に利用される色は、色域対応付けにより自動的に生産され、鮮やかさに劣る色になる。

<color> 値の直列化法

この節は、[CSSOM-1] § CSS 値の直列化法の[ <color> 値の直列化法に関係する部分 ]を更新して置換する。

この節に利用される文字列に対応する文字は:

" ": U+0020 SPACE、
",": U+002C COMMA、
"-": U+002D HYPHEN-MINUS、
".": U+002E FULL STOP、
"/": U+002F SOLIDUS

ロケールを問わず、小数点文字には "." を利用するものとする。また、桁を分離する記号(英語における "," など)は利用しないものとする。

color() 関数値の解決法

[ 算出値, 使用値 ]は、どちらも、次が成すペアになる:

例えば、color(display-p3 0.823 0.6554 0.2537 / 1) の算出値は:
 :color(display-p3 0.823 0.6554 0.2537)
color() 関数の直列化法

color() 値を直列化した形は、算出値から導出され、color() 形を利用する ―[関数の名前/色空間の名前]は小文字化される。

各成分値は、<number> として基数 10 で直列化される。[成分値どうし/色空間名と 1 個目の色成分]は、1 個の U+0020 SPACE を利用して分離するものとする。

どの成分値に対しても、小数部の尾部を成す 0 は省略するものとする。小数部がすべて 0 からなる場合、小数点も省略するものとする。

:color(dIsPlAy-P3 0.964 0.763 0.787) を直列化した結果は、小数部が 2 桁まで維持されていたなら:

 "color(display-p3 0.96 0.76 0.79)"

0.787 は、0.78 に切り捨てるのではなく、0.79 に切り上げることに注意。

¶例を省く

<SPAN style="color(display-p3 0.823 0.6554 0.2537 / 1)">■テスト</SPAN>


テスト
HTML:

ここに表示
¶[Edge]✖
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: