CSS3

：

値

：

<color>

Lv4　編集：2022.07.09 by T.A.

色の表現法。

色は、［“チャネル”とも呼ばれる、色空間内のある軸を表現している成分］たちが成すリストとして表現される。各チャネルがとり得る値には、最小と最大があり、その合間にあるどの値もとれる。加えて、どの色にも、不透明度 ─ 後景が色の背後からどの程度透けて見えるか ─ を指示する alpha 成分が付帯する。

<color>: ＝<absolute-color-base>
| currentcolor
| <system-color>
| <device-cmyk()>

<absolute-color-base>: ＝<hex-color>
| <named-color>
| transparent
| <rgb()>
| <rgba()>
| <hsl()>
| <hsla()>
| <hwb()>
| <lab()>
| <lch()>
| <oklab()>
| <oklch()>
| <color()>

これらのうち、次に挙げるものは、色関数（color-function）と総称される：

<rgb()>、<rgba()>、<hsl()>、<hsla()>、<hwb()>、<lab()>、<lch()>、<color()>

currentcolor

同じ要素上の color プロパティの値を表現する。<named-color> と違って、これは、sRGB には制約されない ― どの <color> も値にとり得る。その使用値は、§ その他の色の解決法により決定される。

<SPAN style="color:red;
 border:1px solid currentcolor;
">テスト</SPAN>

transparent

透明な黒を指定する。これは、<named-color> の一種である。【と記されているが、<color> の構文にて示唆されるように、その一部を成すものではない。】

<SPAN style="border:1px solid red;
 color:transparent;
 background-color:#ffa;
">テスト</SPAN>

システムカラー

各種 <system-color> キーワードは、このパレットを成す色を公開して、ページの残りを、この制約されたパレットに統合できるようにする。

¶詳細省く

<system-color>：
<system-color>	色（使用ブラウザーでの表示）	備考
`Canvas`		［アプリケーション内容／文書］の背景。
`CanvasText`		［アプリケーション内容／文書］内のテキスト。
`LinkText`		［作動中でない／訪問済みでない］リンク内のテキスト。伝統的には blue 。
`VisitedText`		訪問済みリンク内のテキスト。伝統的には purple 。
`ActiveText`		作動中のリンク内のテキスト。伝統的には red 。
`ButtonFace`		プッシュボタン用の表面背景色。
`ButtonText`		プッシュボタン上のテキスト。
`ButtonBorder`		プッシュボタン用の基底ボーダー色。
`Field`		入力欄の背景。
`FieldText`		入力欄内のテキスト。
`Highlight`		選択されているテキストの背景。例えば、::selection 用の。
`HighlightText`		選択されているテキスト。
`SelectedItem`		選択されているアイテムの背景。例えば、選択されたチェックボックス。
`SelectedItemText`		選択されているアイテム。
`Mark`		特別にマークされているテキストの背景（HTML mark 要素など）。
`MarkText`		特別にマークされているテキスト（HTML mark 要素など）。
`GrayText`		不能化された【ユーザーインタフェースなどの】テキスト（ gray になることが多いが、常にそうなるとは限らない）。

<SPAN style="border:1px solid red;
 color:VisitedText;
">●テスト</SPAN>

RGB 16 進記法： #RRGGBB

CSS 16 進色記法により、各チャネルに 16 進数を与えて sRGB 色を指定することも許容される。それは、コンピュータコードで色を直に与えるときによくある書き方に類似する。また、rgb() 記法より短く書ける。

<hex-color> の構文は、［［3／4／6／8］個の 16 進数字が成す並び］を値にとる <hash-token> トークンである。言い換えれば、16 進色は、［ハッシュ文字 "#"、［3／4／6／8］個の［数字 0 ～ 9、英字 a ～ f］］が成す並びで記される（英字は大小無視なので、#00ff00 は #00FF00 と同じになる）。

#RGB 3 桁

<hex-color>これは、6 桁記法を短く記す変種である。1 桁ごとに 16 進数として解釈され、順に、色の［red、green、blue］チャネルを指定する。ここで、［0 が色の最小値／f が色の最大値］を表現する。色の alpha チャネルは全不透明になる。

<SPAN style="border:1px solid red;
 color:#dd0;
">●テスト</SPAN>

#RGBa 4 桁

これは、8 桁記法を短くした変種であり、3 桁記法と同じ仕方で“展開される”。RGB の 3 桁は 3 桁記法と同様に解釈される。最後の桁 a は alpha チャネルを表現し、同様に［0 が最小値／f が最大値］に解釈される。

<SPAN style="border:1px solid red;
 color:#dd04;
">●テスト</SPAN>

#RRGGBB 6 桁

2 桁ごとに 16 進数として解釈され、順に、色の［red、green、blue］チャネルを指定する。ここで、［00 が色の最小値／ff（10 進数で 255）が色の最大値］を表現する。色の alpha チャネルは全不透明になる。

<SPAN style="border:1px solid red;
 color:#d0d000;
">●テスト</SPAN>

#RRGGBBaa 8 桁

最初の 6 桁は、6 桁記法と同じに解釈される。最後の 2 桁も 16 進数に解釈され、色の alpha チャネルを指定する。ここで、［00 は全透明な色／ff は全不透明な色］を表現する。

<SPAN style="border:1px solid red;
 color:#d0d00040;
">●テスト</SPAN>

有名色

よくある色をもっと容易に［書ける／読める］ようにするため、CSS は、長大な有名色の集合 ― <named-color> ― を定義する。<named-color> は、<ident> として記され、<color> が受容される所ならどこでも利用できる。CSS により定義される通例の <ident> と同様に、これらのキーワードは、すべて ASCII 大小無視である。

これらの名前は、sRGB 色に解決される：

<named-color>：
元々は VGA パレットに由来し、HTML に採用された。
<named-color>	色
`aqua`
`black`
`blue`
`fuchsia`
`gray`
`green`
`lime`
`maroon`
`navy`
`olive`
`purple`
`red`
`silver`
`teal`
`white`
`yellow`

そのほかに定義されている有名色。
<named-color>	色（有名色指定、#RRGGBB指定）	値
<named-color>	色（有名色指定、#RRGGBB指定）	#RRGGBB	10進：R G B
`aliceblue`		#f0f8ff	240 248 255
`antiquewhite`		#faebd7	250 235 215
`aqua`		#00ffff	0 255 255
`aquamarine`		#7fffd4	127 255 212
`azure`		#f0ffff	240 255 255
`beige`		#f5f5dc	245 245 220
`bisque`		#ffe4c4	255 228 196
`black`		#000000	0 0 0
`blanchedalmond`		#ffebcd	255 235 205
`blue`		#0000ff	0 0 255
`blueviolet`		#8a2be2	138 43 226
`brown`		#a52a2a	165 42 42
`burlywood`		#deb887	222 184 135
`cadetblue`		#5f9ea0	95 158 160
`chartreuse`		#7fff00	127 255 0
`chocolate`		#d2691e	210 105 30
`coral`		#ff7f50	255 127 80
`cornflowerblue`		#6495ed	100 149 237
`cornsilk`		#fff8dc	255 248 220
`crimson`		#dc143c	220 20 60
`cyan`		#00ffff	0 255 255
`darkblue`		#00008b	0 0 139
`darkcyan`		#008b8b	0 139 139
`darkgoldenrod`		#b8860b	184 134 11
`darkgray`		#a9a9a9	169 169 169
`darkgreen`		#006400	0 100 0
`darkgrey`		#a9a9a9	169 169 169
`darkkhaki`		#bdb76b	189 183 107
`darkmagenta`		#8b008b	139 0 139
`darkolivegreen`		#556b2f	85 107 47
`darkorange`		#ff8c00	255 140 0
`darkorchid`		#9932cc	153 50 204
`darkred`		#8b0000	139 0 0
`darksalmon`		#e9967a	233 150 122
`darkseagreen`		#8fbc8f	143 188 143
`darkslateblue`		#483d8b	72 61 139
`darkslategray`		#2f4f4f	47 79 79
`darkslategrey`		#2f4f4f	47 79 79
`darkturquoise`		#00ced1	0 206 209
`darkviolet`		#9400d3	148 0 211
`deeppink`		#ff1493	255 20 147
`deepskyblue`		#00bfff	0 191 255
`dimgray`		#696969	105 105 105
`dimgrey`		#696969	105 105 105
`dodgerblue`		#1e90ff	30 144 255
`firebrick`		#b22222	178 34 34
`floralwhite`		#fffaf0	255 250 240
`forestgreen`		#228b22	34 139 34
`fuchsia`		#ff00ff	255 0 255
`gainsboro`		#dcdcdc	220 220 220
`ghostwhite`		#f8f8ff	248 248 255
`gold`		#ffd700	255 215 0
`goldenrod`		#daa520	218 165 32
`gray`		#808080	128 128 128
`green`		#008000	0 128 0
`greenyellow`		#adff2f	173 255 47
`grey`		#808080	128 128 128
`honeydew`		#f0fff0	240 255 240
`hotpink`		#ff69b4	255 105 180
`indianred`		#cd5c5c	205 92 92
`indigo`		#4b0082	75 0 130
`ivory`		#fffff0	255 255 240
`khaki`		#f0e68c	240 230 140
`lavender`		#e6e6fa	230 230 250
`lavenderblush`		#fff0f5	255 240 245
`lawngreen`		#7cfc00	124 252 0
`lemonchiffon`		#fffacd	255 250 205
`lightblue`		#add8e6	173 216 230
`lightcoral`		#f08080	240 128 128
`lightcyan`		#e0ffff	224 255 255
`lightgoldenrodyellow`		#fafad2	250 250 210
`lightgray`		#d3d3d3	211 211 211
`lightgreen`		#90ee90	144 238 144
`lightgrey`		#d3d3d3	211 211 211
`lightpink`		#ffb6c1	255 182 193
`lightsalmon`		#ffa07a	255 160 122
`lightseagreen`		#20b2aa	32 178 170
`lightskyblue`		#87cefa	135 206 250
`lightslategray`		#778899	119 136 153
`lightslategrey`		#778899	119 136 153
`lightsteelblue`		#b0c4de	176 196 222
`lightyellow`		#ffffe0	255 255 224
`lime`		#00ff00	0 255 0
`limegreen`		#32cd32	50 205 50
`linen`		#faf0e6	250 240 230
`magenta`		#ff00ff	255 0 255
`maroon`		#800000	128 0 0
`mediumaquamarine`		#66cdaa	102 205 170
`mediumblue`		#0000cd	0 0 205
`mediumorchid`		#ba55d3	186 85 211
`mediumpurple`		#9370db	147 112 219
`mediumseagreen`		#3cb371	60 179 113
`mediumslateblue`		#7b68ee	123 104 238
`mediumspringgreen`		#00fa9a	0 250 154
`mediumturquoise`		#48d1cc	72 209 204
`mediumvioletred`		#c71585	199 21 133
`midnightblue`		#191970	25 25 112
`mintcream`		#f5fffa	245 255 250
`mistyrose`		#ffe4e1	255 228 225
`moccasin`		#ffe4b5	255 228 181
`navajowhite`		#ffdead	255 222 173
`navy`		#000080	0 0 128
`oldlace`		#fdf5e6	253 245 230
`olive`		#808000	128 128 0
`olivedrab`		#6b8e23	107 142 35
`orange`		#ffa500	255 165 0
`orangered`		#ff4500	255 69 0
`orchid`		#da70d6	218 112 214
`palegoldenrod`		#eee8aa	238 232 170
`palegreen`		#98fb98	152 251 152
`paleturquoise`		#afeeee	175 238 238
`palevioletred`		#db7093	219 112 147
`papayawhip`		#ffefd5	255 239 213
`peachpuff`		#ffdab9	255 218 185
`peru`		#cd853f	205 133 63
`pink`		#ffc0cb	255 192 203
`plum`		#dda0dd	221 160 221
`powderblue`		#b0e0e6	176 224 230
`purple`		#800080	128 0 128
`rebeccapurple`		#663399	102 51 153
`red`		#ff0000	255 0 0
`rosybrown`		#bc8f8f	188 143 143
`royalblue`		#4169e1	65 105 225
`saddlebrown`		#8b4513	139 69 19
`salmon`		#fa8072	250 128 114
`sandybrown`		#f4a460	244 164 96
`seagreen`		#2e8b57	46 139 87
`seashell`		#fff5ee	255 245 238
`sienna`		#a0522d	160 82 45
`silver`		#c0c0c0	192 192 192
`skyblue`		#87ceeb	135 206 235
`slateblue`		#6a5acd	106 90 205
`slategray`		#708090	112 128 144
`slategrey`		#708090	112 128 144
`snow`		#fffafa	255 250 250
`springgreen`		#00ff7f	0 255 127
`steelblue`		#4682b4	70 130 180
`tan`		#d2b48c	210 180 140
`teal`		#008080	0 128 128
`thistle`		#d8bfd8	216 191 216
`tomato`		#ff6347	255 99 71
`turquoise`		#40e0d0	64 224 208
`violet`		#ee82ee	238 130 238
`wheat`		#f5deb3	245 222 179
`white`		#ffffff	255 255 255
`whitesmoke`		#f5f5f5	245 245 245
`yellow`		#ffff00	255 255 0
`yellowgreen`		#9acd32	154 205 50

<SPAN style="border:1px solid red;
 color:aqua;
">●テスト</SPAN>

テスト

ここに表示

スクリプト：

スクリプト：

表示内容：

CSS3

値

<color>

システム カラー

RGB 16 進記法： #RRGGBB

有名色

テスト

システムカラー