/
466.txt
642 lines (510 loc) · 44.4 KB
/
466.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
[77] [[CSS]] における [DFN[[CODE(CSS)@en[[[<color>]]]]]] は、[[色]]を表します。
* 仕様書
- [78] [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/#colorunits>
- [90] [CITE[Basic Data Types and Interfaces – SVG 1.1 (Second Edition)]] ([TIME[2011-06-09 08:01:15 +09:00]] 版) <http://www.w3.org/TR/SVG/types.html#ColorKeywords>
* 構文
- [88] [[色キーワード]]
-- [79] [[基本色キーワード]]
-- [89] [[拡張色キーワード]]
-- [87] [CODE(CSS)@en['[[transparent]]']]
-- [97] [CODE(CSS)@en['[[currentColor]]']]
-- [98] [[システム色]]
-- [99] [CODE(CSS)@en['[[flavor]]']]
-- [107] [CODE(CSS)@en['[[invert]]']]
-- [106] [CODE(CSS)@en['[[-moz-use-text-color]]']]
- [86] [CODE(CSS)@en[[['''#'''[VAR[rgb]]]]]]
- [86] [CODE(CSS)@en[[['''#'''[VAR[rrggbb]]]]]]
- [82] [CODE(CSS)@en[[[rgb()]]]]
- [83] [CODE(CSS)@en[[[rgba()]]]]
- [84] [CODE(CSS)@en[[[hsl()]]]]
- [85] [CODE(CSS)@en[[[hsla()]]]]
* 基本色キーワード
[80] [DFN[[RUBYB[[[基本色キーワード]]]@en[basic color keywords]]]]は、
[[HTML]] や [[CSS]] の仕様で古くから規定されてきた基本的な[[色]]の名前の[[キーワード]]16種類です。
[[大文字・小文字不区別]]です。
[81] <http://www.w3.org/TR/2011/REC-css3-color-20110607/#colorunits> に一覧があります。
* [CODE(CSS)@en[orange]]
[92] [CODE(CSS)@en[[[orange]]]] は[[基本色キーワード]]に含まれていませんが、 [[CSS 2.1]] で追加されました。
実際には[[拡張色キーワード]]に含まれていて古くから実装されてきました。
* 拡張色キーワード
[91] [DFN[[RUBYB[[[拡張色キーワード]]]@en[extended color keywords]]]]は、
[[X11]] に由来して [[HTML]] や [[CSS]] で古くから使われてきた[[色]]の名前の[[キーワード]]です。
[[大文字・小文字不区別]]です。
[93] [[基本色キーワード]]と [CODE(CSS)@en[[[orange]]]] を含み沢山の[[色]]が定義されています。
[94] <http://www.w3.org/TR/2011/REC-css3-color-20110607/#svg-color>
に一覧があります。
[95] 元々は [[X11]] で使われていた[[色]]の名前を [[Netscape Navigator]] が [[HTML]]
に採用したものでしたが、他の [[Webブラウザー]]も追随し、 [[HTML]] と [[CSS]]
で広く使われてきました。 [[SVG 1.0]] で初めて公式な仕様に取り込まれ、 [[CSS]]
本体仕様としては [[CSS3]] ではじめて [[W3C]] [[勧告]]となりました。
[96] 大元の [[X11]] の[[色]]とは多少の違いがあります。 [[SVG]] や [[CSS]]
では [CODE(CSS)@en[[[gray]]]] と [CODE(CSS)@en[[[grey]]]] の表記揺れをすべて含んでいますが、
歴史的には片方のみにしか対応していない実装もありました。
* 色名
,[[#form:'%color-example(color=>aliceblue);':'':'%output(form=>0);']] ,"rgb(240,248,255) " ,[X11]
,[[#form:'%color-example(color=>antiquewhite);':'':'%output(form=>0);']] ,"rgb(250,235,215) " ,[X11]
,[[#form:'%color-example(color=>aqua);':'':'%output(form=>0);']] ,"rgb( 0,255,255) " ,"(=cyan) [HTML4],[X11],[J]"
,[[#form:'%color-example(color=>aquamarine);':'':'%output(form=>0);']] ,"rgb(127,255,212) " ,[X11]
,[[#form:'%color-example(color=>azure);':'':'%output(form=>0);']] ,"rgb(240,255,255) " ,[X11]
,[[#form:'%color-example(color=>beige);':'':'%output(form=>0);']] ,"rgb(245,245,220) " ,[X11]
,[[#form:'%color-example(color=>bisque);':'':'%output(form=>0);']] ,"rgb(255,228,196) " ,[X11]
,[[#form:'%color-example(color=>black);':'':'%output(form=>0);']] ,"rgb( 0, 0, 0) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>blanchedalmond);':'':'%output(form=>0);']] ,"rgb(255,235,205) " ,[X11]
,[[#form:'%color-example(color=>blue);':'':'%output(form=>0);']] ,"rgb( 0, 0,255) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>blueviolet);':'':'%output(form=>0);']] ,"rgb(138, 43,226) " ,[X11]
,[[#form:'%color-example(color=>brown);':'':'%output(form=>0);']] ,"rgb(165, 42, 42) " ,[X11]
,[[#form:'%color-example(color=>burlywood);':'':'%output(form=>0);']] ,"rgb(222,184,135) " ,[X11]
,[[#form:'%color-example(color=>cadetblue);':'':'%output(form=>0);']] ,"rgb( 95,158,160) " ,[X11]
,[[#form:'%color-example(color=>chartreuse);':'':'%output(form=>0);']] ,"rgb(127,255, 0) " ,[X11]
,[[#form:'%color-example(color=>chocolate);':'':'%output(form=>0);']] ,"rgb(210,105, 30) " ,[X11]
,[[#form:'%color-example(color=>coral);':'':'%output(form=>0);']] ,"rgb(255,127, 80) " ,[X11]
,[[#form:'%color-example(color=>cornflowerblue);':'':'%output(form=>0);']] ,"rgb(100,149,237) " ,[X11]
,[[#form:'%color-example(color=>cornsilk);':'':'%output(form=>0);']] ,"rgb(255,248,220) " ,[X11]
,[[#form:'%color-example(color=>crimson);':'':'%output(form=>0);']] ,"rgb(220, 20, 60) " ,[X11]
,[[#form:'%color-example(color=>cyan);':'':'%output(form=>0);']] ,"rgb( 0,255,255) " ,(=aqua) [X11]
,[[#form:'%color-example(color=>darkblue);':'':'%output(form=>0);']] ,"rgb(0, 0,139) " ,[X11]
,[[#form:'%color-example(color=>darkcyan);':'':'%output(form=>0);']] ,"rgb(0,139,139) " ,[X11]
,[[#form:'%color-example(color=>darkgoldenrod);':'':'%output(form=>0);']] ,"rgb(184,134, 11) " ,[X11]
,[[#form:'%color-example(color=>darkgray);':'':'%output(form=>0);']] ,"rgb(169,169,169) " ,[X11]
,[[#form:'%color-example(color=>darkgreen);':'':'%output(form=>0);']] ,"rgb( 0,100, 0) " ,[X11]
,[[#form:'%color-example(color=>darkgrey);':'':'%output(form=>0);']] ,"rgb(169,169,169) " ,[Mozilla]
,[[#form:'%color-example(color=>darkkhaki);':'':'%output(form=>0);']] ,"rgb(189,183,107) " ,[X11]
,[[#form:'%color-example(color=>darkmagenta);':'':'%output(form=>0);']] ,"rgb(139, 0,139) " ,[X11]
,[[#form:'%color-example(color=>darkolivegreen);':'':'%output(form=>0);']] ,"rgb( 85,107, 47) " ,[X11]
,[[#form:'%color-example(color=>darkorange);':'':'%output(form=>0);']] ,"rgb(255,140, 0) " ,[X11]
,[[#form:'%color-example(color=>darkorchid);':'':'%output(form=>0);']] ,"rgb(153, 50,204) " ,[X11]
,[[#form:'%color-example(color=>darkred);':'':'%output(form=>0);']] ,"rgb(139, 0, 0) " ,[X11]
,[[#form:'%color-example(color=>darksalmon);':'':'%output(form=>0);']] ,"rgb(233,150,122) " ,[X11]
,[[#form:'%color-example(color=>darkseagreen);':'':'%output(form=>0);']] ,"rgb(143,188,143) " ,[X11]
,[[#form:'%color-example(color=>darkslateblue);':'':'%output(form=>0);']] ,"rgb( 72, 61,139) " ,[X11]
,[[#form:'%color-example(color=>darkslategray);':'':'%output(form=>0);']] ,"rgb( 47, 79, 79) " ,[X11]
,[[#form:'%color-example(color=>darkslategrey);':'':'%output(form=>0);']] ,"rgb( 47, 79, 79) " ,[Mozilla]
,[[#form:'%color-example(color=>darkturquoise);':'':'%output(form=>0);']] ,"rgb( 0,206,209) " ,[X11]
,[[#form:'%color-example(color=>darkviolet);':'':'%output(form=>0);']] ,"rgb(148, 0,211) " ,[X11]
,[[#form:'%color-example(color=>deeppink);':'':'%output(form=>0);']] ,"rgb(255, 20,147) " ,[X11]
,[[#form:'%color-example(color=>deepskyblue);':'':'%output(form=>0);']] ,"rgb( 0,191,255) " ,[X11]
,[[#form:'%color-example(color=>dimgray);':'':'%output(form=>0);']] ,"rgb(105,105,105) " ,[X11]
,[[#form:'%color-example(color=>dimgrey);':'':'%output(form=>0);']] ,"rgb(105,105,105) " ,[Mozilla]
,[[#form:'%color-example(color=>dodgerblue);':'':'%output(form=>0);']] ,"rgb( 30,144,255) " ,[X11]
,[[#form:'%color-example(color=>firebrick);':'':'%output(form=>0);']] ,"rgb(178, 34, 34) " ,[X11]
,[[#form:'%color-example(color=>floralwhite);':'':'%output(form=>0);']] ,"rgb(255,250,240) " ,[X11]
,[[#form:'%color-example(color=>forestgreen);':'':'%output(form=>0);']] ,"rgb(34,139, 34) " ,[X11]
,[[#form:'%color-example(color=>fuchsia);':'':'%output(form=>0);']] ,"rgb(255, 0,255) " ,"(= magenta) [HTML4],[X11],[J4]"
,[[#form:'%color-example(color=>gainsboro);':'':'%output(form=>0);']] ,"rgb(220,220,220) " ,[X11]
,[[#form:'%color-example(color=>ghostwhite);':'':'%output(form=>0);']] ,"rgb(248,248,255) " ,[X11]
,[[#form:'%color-example(color=>gold);':'':'%output(form=>0);']] ,"rgb(255,215, 0) " ,[X11]
,[[#form:'%color-example(color=>goldenrod);':'':'%output(form=>0);']] ,"rgb(218,165, 32) " ,[X11]
,[[#form:'%color-example(color=>gray);':'':'%output(form=>0);']] ,"rgb(128,128,128) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>grey);':'':'%output(form=>0);']] ,"rgb(128,128,128) " ,[Mozilla]
,[[#form:'%color-example(color=>green);':'':'%output(form=>0);']] ,"rgb( 0,128, 0) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>greenyellow);':'':'%output(form=>0);']] ,"rgb(173,255, 47) " ,[X11]
,[[#form:'%color-example(color=>honeydew);':'':'%output(form=>0);']] ,"rgb(240,255,240) " ,[X11]
,[[#form:'%color-example(color=>hotpink);':'':'%output(form=>0);']] ,"rgb(255,105,180) " ,[X11]
,[[#form:'%color-example(color=>indianred);':'':'%output(form=>0);']] ,"rgb(205, 92, 92) " ,[X11]
,[[#form:'%color-example(color=>indigo);':'':'%output(form=>0);']] ,"rgb( 75, 0,130) " ,[X11]
,[[#form:'%color-example(color=>ivory);':'':'%output(form=>0);']] ,"rgb(255,255,240) " ,[X11]
,[[#form:'%color-example(color=>khaki);':'':'%output(form=>0);']] ,"rgb(240,230,140) " ,[X11]
,[[#form:'%color-example(color=>lavender);':'':'%output(form=>0);']] ,"rgb(230,230,250) " ,[X11]
,[[#form:'%color-example(color=>lavenderblush);':'':'%output(form=>0);']] ,"rgb(255,240,245) " ,[X11]
,[[#form:'%color-example(color=>lawngreen);':'':'%output(form=>0);']] ,"rgb(124,252, 0) " ,[X11]
,[[#form:'%color-example(color=>lemonchiffon);':'':'%output(form=>0);']] ,"rgb(255,250,205) " ,[X11]
,[[#form:'%color-example(color=>lightblue);':'':'%output(form=>0);']] ,"rgb(173,216,230) " ,[X11]
,[[#form:'%color-example(color=>lightcoral);':'':'%output(form=>0);']] ,"rgb(240,128,128) " ,[X11]
,[[#form:'%color-example(color=>lightcyan);':'':'%output(form=>0);']] ,"rgb(224,255,255) " ,[X11]
,[[#form:'%color-example(color=>lightgoldenrodyellow);':'':'%output(form=>0);']] ,"rgb(250,250,210) " ,[X11]
,[[#form:'%color-example(color=>lightgray);':'':'%output(form=>0);']] ,"rgb(211,211,211) " ,[Mozilla]
,[[#form:'%color-example(color=>lightgreen);':'':'%output(form=>0);']] ,"rgb(144,238,144) " ,[X11]
,[[#form:'%color-example(color=>lightgrey);':'':'%output(form=>0);']] ,"rgb(211,211,211) " ,[X11]
,[[#form:'%color-example(color=>lightpink);':'':'%output(form=>0);']] ,"rgb(255,182,193) " ,[X11]
,[[#form:'%color-example(color=>lightsalmon);':'':'%output(form=>0);']] ,"rgb(255,160,122) " ,[X11]
,[[#form:'%color-example(color=>lightseagreen);':'':'%output(form=>0);']] ,"rgb( 32,178,170) " ,[X11]
,[[#form:'%color-example(color=>lightskyblue);':'':'%output(form=>0);']] ,"rgb(135,206,250) " ,[X11]
,[[#form:'%color-example(color=>lightslategray);':'':'%output(form=>0);']] ,"rgb(119,136,153) " ,[X11]
,[[#form:'%color-example(color=>lightslategrey);':'':'%output(form=>0);']] ,"rgb(119,136,153) " ,[Mozilla]
,[[#form:'%color-example(color=>lightsteelblue);':'':'%output(form=>0);']] ,"rgb(176,196,222) " ,[X11]
,[[#form:'%color-example(color=>lightyellow);':'':'%output(form=>0);']] ,"rgb(255,255,224) " ,[X11]
,[[#form:'%color-example(color=>lime);':'':'%output(form=>0);']] ,"rgb( 0,255, 0) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>limegreen);':'':'%output(form=>0);']] ,"rgb( 50,205, 50) " ,[X11]
,[[#form:'%color-example(color=>linen);':'':'%output(form=>0);']] ,"rgb(250,240,230) " ,[X11]
,[[#form:'%color-example(color=>magenta);':'':'%output(form=>0);']] ,"rgb(255, 0,255) " ,"(= fuchsia) [X11],[J3]"
,[[#form:'%color-example(color=>maroon);':'':'%output(form=>0);']] ,"rgb(128, 0, 0) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>mediumaquamarine);':'':'%output(form=>0);']] ,"rgb(102,205,170) " ,[X11]
,[[#form:'%color-example(color=>mediumblue);':'':'%output(form=>0);']] ,"rgb(0, 0,205) " ,[X11]
,[[#form:'%color-example(color=>mediumorchid);':'':'%output(form=>0);']] ,"rgb(186, 85,211) " ,[X11]
,[[#form:'%color-example(color=>mediumpurple);':'':'%output(form=>0);']] ,"rgb(147,112,219) " ,[X11]
,[[#form:'%color-example(color=>mediumseagreen);':'':'%output(form=>0);']] ,"rgb( 60,179,113) " ,[X11]
,[[#form:'%color-example(color=>mediumslateblue);':'':'%output(form=>0);']] ,"rgb(123,104,238) " ,[X11]
,[[#form:'%color-example(color=>mediumspringgreen);':'':'%output(form=>0);']] ,"rgb( 0,250,154) " ,[X11]
,[[#form:'%color-example(color=>mediumturquoise);':'':'%output(form=>0);']] ,"rgb( 72,209,204) " ,[X11]
,[[#form:'%color-example(color=>mediumvioletred);':'':'%output(form=>0);']] ,"rgb(199, 21,133) " ,[X11]
,[[#form:'%color-example(color=>midnightblue);':'':'%output(form=>0);']] ,"rgb( 25, 25,112) " ,[X11]
,[[#form:'%color-example(color=>mintcream);':'':'%output(form=>0);']] ,"rgb(245,255,250) " ,[X11]
,[[#form:'%color-example(color=>mistyrose);':'':'%output(form=>0);']] ,"rgb(255,228,225) " ,[X11]
,[[#form:'%color-example(color=>moccasin);':'':'%output(form=>0);']] ,"rgb(255,228,181) " ,[X11]
,[[#form:'%color-example(color=>navajowhite);':'':'%output(form=>0);']] ,"rgb(255,222,173) " ,[X11]
,[[#form:'%color-example(color=>navy);':'':'%output(form=>0);']] ,"rgb( 0, 0,128) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>oldlace);':'':'%output(form=>0);']] ,"rgb(253,245,230) " ,[X11]
,[[#form:'%color-example(color=>olive);':'':'%output(form=>0);']] ,"rgb(128,128, 0) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>olivedrab);':'':'%output(form=>0);']] ,"rgb(107,142, 35) " ,[X11]
,[[#form:'%color-example(color=>orange);':'':'%output(form=>0);']] ,"rgb(255,165, 0) " ,[X11]
,[[#form:'%color-example(color=>orangered);':'':'%output(form=>0);']] ,"rgb(255,69, 0) " ,[X11]
,[[#form:'%color-example(color=>orchid);':'':'%output(form=>0);']] ,"rgb(218,112,214) " ,[X11]
,[[#form:'%color-example(color=>palegoldenrod);':'':'%output(form=>0);']] ,"rgb(238,232,170) " ,[X11]
,[[#form:'%color-example(color=>palegreen);':'':'%output(form=>0);']] ,"rgb(152,251,152) " ,[X11]
,[[#form:'%color-example(color=>paleturquoise);':'':'%output(form=>0);']] ,"rgb(175,238,238) " ,[X11]
,[[#form:'%color-example(color=>palevioletred);':'':'%output(form=>0);']] ,"rgb(219,112,147) " ,[X11]
,[[#form:'%color-example(color=>papayawhip);':'':'%output(form=>0);']] ,"rgb(255,239,213) " ,[X11]
,[[#form:'%color-example(color=>peachpuff);':'':'%output(form=>0);']] ,"rgb(255,218,185) " ,[X11]
,[[#form:'%color-example(color=>peru);':'':'%output(form=>0);']] ,"rgb(205,133, 63) " ,[X11]
,[[#form:'%color-example(color=>pink);':'':'%output(form=>0);']] ,"rgb(255,192,203) " ,[X11]
,[[#form:'%color-example(color=>plum);':'':'%output(form=>0);']] ,"rgb(221,160,221) " ,[X11]
,[[#form:'%color-example(color=>powderblue);':'':'%output(form=>0);']] ,"rgb(176,224,230) " ,[X11]
,[[#form:'%color-example(color=>purple);':'':'%output(form=>0);']] ,"rgb(128, 0,128) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>red);':'':'%output(form=>0);']] ,"rgb(255, 0, 0) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>rosybrown);':'':'%output(form=>0);']] ,"rgb(188,143,143) " ,[X11]
,[[#form:'%color-example(color=>royalblue);':'':'%output(form=>0);']] ,"rgb( 65,105,225) " ,[X11]
,[[#form:'%color-example(color=>saddlebrown);':'':'%output(form=>0);']] ,"rgb(139, 69, 19) " ,[X11]
,[[#form:'%color-example(color=>salmon);':'':'%output(form=>0);']] ,"rgb(250,128,114) " ,[X11]
,[[#form:'%color-example(color=>sandybrown);':'':'%output(form=>0);']] ,"rgb(244,164, 96) " ,[X11]
,[[#form:'%color-example(color=>seagreen);':'':'%output(form=>0);']] ,"rgb( 46,139, 87) " ,[X11]
,[[#form:'%color-example(color=>seashell);':'':'%output(form=>0);']] ,"rgb(255,245,238) " ,[X11]
,[[#form:'%color-example(color=>sienna);':'':'%output(form=>0);']] ,"rgb(160, 82, 45) " ,[X11]
,[[#form:'%color-example(color=>silver);':'':'%output(form=>0);']] ,"rgb(192,192,192) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>skyblue);':'':'%output(form=>0);']] ,"rgb(135,206,235) " ,[X11]
,[[#form:'%color-example(color=>slateblue);':'':'%output(form=>0);']] ,"rgb(106, 90,205) " ,[X11]
,[[#form:'%color-example(color=>slategray);':'':'%output(form=>0);']] ,"rgb(112,128,144) " ,[X11]
,[[#form:'%color-example(color=>slategrey);':'':'%output(form=>0);']] ,"rgb(112,128,144) " ,[Mozilla]
,[[#form:'%color-example(color=>snow);':'':'%output(form=>0);']] ,"rgb(255,250,250) " ,[X11]
,[[#form:'%color-example(color=>springgreen);':'':'%output(form=>0);']] ,"rgb( 0,255,127) " ,[X11]
,[[#form:'%color-example(color=>steelblue);':'':'%output(form=>0);']] ,"rgb( 70,130,180) " ,[X11]
,[[#form:'%color-example(color=>tan);':'':'%output(form=>0);']] ,"rgb(210,180,140) " ,[X11]
,[[#form:'%color-example(color=>teal);':'':'%output(form=>0);']] ,"rgb( 0,128,128) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>thistle);':'':'%output(form=>0);']] ,"rgb(216,191,216) " ,[X11]
,[[#form:'%color-example(color=>tomato);':'':'%output(form=>0);']] ,"rgb(255, 99, 71) " ,[X11]
,[[#form:'%color-example(color=>turquoise);':'':'%output(form=>0);']] ,"rgb( 64,224,208) " ,[X11]
,[[#form:'%color-example(color=>violet);':'':'%output(form=>0);']] ,"rgb(238,130,238) " ,[X11]
,[[#form:'%color-example(color=>wheat);':'':'%output(form=>0);']] ,"rgb(245,222,179) " ,[X11]
,[[#form:'%color-example(color=>white);':'':'%output(form=>0);']] ,"rgb(255,255,255) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>whitesmoke);':'':'%output(form=>0);']] ,"rgb(245,245,245) " ,[X11]
,[[#form:'%color-example(color=>yellow);':'':'%output(form=>0);']] ,"rgb(255,255, 0) " ,"[HTML4],[X11],[J]"
,[[#form:'%color-example(color=>yellowgreen);':'':'%output(form=>0);']] ,"rgb(154,205, 50) " ,[X11]
[1] [HTML4] は [[HTML4]], [[CSS1]], [[CSS2]] で規定されている基本16色。
[2] [X11] は [[SVG]] で規定されている拡張色。多くの [[WWWブラウザ]]は
[[HTML]] や [[CSS]] の色系属性値として昔から対応している。
[39] [J3] は 「[[J-SKY]] 向け HTML/3.01」,
[J4] は同/4.0。 [J] は [J3] 且つ [J4]。
[J3] にあった [CODE(HTML)[magenta]] は [J4]
で HTML 4 にあわせて [CODE(HTML)[Fuchsia]] に変更されました。
- [3] ''CSS2 <color>データ型・ノート'' <http://is.vis.ne.jp/notes/css2_syndata/v_color.xhtml>
- [4] ''Color Values'' <http://developer.netscape.com/docs/manuals/communicator/jsguide4/colors.htm>
- [5] 色名は基本16色以外は安全ではないから16進数表記を使うようにと長らく言われてきました。しかし最近では色名に対応した [[UA]] はほとんど X11 colors と呼ばれる、 [[NN]] 拡張に由来すると言われている追加の色にも対応しています。ですから、ほとんどの場合 X11 色も安全ですし、実際そういう事情を知らずに使っている人は沢山います。 (事情を知ってても、 [CODE[orange]] のような基本的な色名まで非標準だったとは知らない人もいるでしょう。)
- [6] >>5 というわけで、 (SVG で CSS に取り入れられて、 CSS3 でも採用される見込みですから) X11 色も今は堂々と使って良いと思います。とはいっても、そういう事情を説明しないで基本16色と X11 色をごちゃまぜにした''説明''はやっぱり好きませんけどね。
- [7] ところで、基本16色でも X11 色でも (CSS2 の [[UI]] 色でも) ない、 WWW ブラウザ独自拡張の色が他にも無いか調べてみましたが、見つかりませんでした。
- [10] ''HTML Color Chart'' <http://www.cam.hi-ho.ne.jp/mendoxi/misc/colorchart.html> 非常によくまとめられていておすすめです。 >>8- で取り上げた gray/grey 問題のほか、 X11 の色表と WWW の X11 色との比較や幻の HoneydewTab と HoneydewTad の話が (って全部か。) 興味深いです。
- [19] ''XHTML colour names and their sRGB values'' <http://frank.ellermann.bei.t-online.de/colour.htm>
[20] >>19 によればこんな色もあったそうですが、今の Mozilla
では [CODE[lightgray]] を除いて確認出来ません。
- [[#form:'%color-example(color=>Lightgoldenrod);':'':'%output(form=>0);']]
- [[#form:'%color-example(color=>Lightslateblue);':'':'%output(form=>0);']]
- [[#form:'%color-example(color=>Lightgray);':'':'%output(form=>0);']]
- [[#form:'%color-example(color=>Navyblue);':'':'%output(form=>0);']]
- [[#form:'%color-example(color=>Violetred);':'':'%output(form=>0);']]
また、 [[#form:'%color-example(color=>blue1);':'':'%output(form=>0);']]
〜[[#form:'%color-example(color=>blue4);':'':'%output(form=>0);']],
[[#form:'%color-example(color=>gray1);':'':'%output(form=>0);']]
〜[[#form:'%color-example(color=>gray100);':'':'%output(form=>0);']]
という指定もあるらしいですが、やはり確認出来ません。
- [21] >>20 後者は rgb.txt に由来するのかな? ''RGB to Color Name Mapping'' <http://web2.ucs.ubc.ca/newcounter/rgb.txt.html>
- [22] >>21 >>20 前半の色も >>21 に載ってますね。
- [23] ''カラー名のlightgreyって?'' <http://www.ybi.co.jp/koike/qa2000/qa2169.htm> ばけらたんの考察が興味深いです。
- [24] >>-23 結局、 X11 から WWW に輸入する時点で混乱が生じたようですな
- [25] 隠し色名があるとの情報もありますが、どんな名前のものかも不明です。 >>20-21 の数字つき色名のことなんでしょうか?
- [28] さて、上の表で [HTML4] は全て [X11] に含まれます。
- [29] (>>10 によれば幾つか定義が違うものがあるものの) [X11] は (本物の [[X]]11 の) [CODE(file)[rgb.txt]] に全て含まれます。
- [30] そして、 [X11] に [Mozilla] を加えたものはやはり [CODE(file)[rgb.txt]] の subset です。
- [31] [X11] + [Mozilla] は [[SVG]] 1.0 や CSS3 で定義された (システム色を除く) 色名と同じです。
[32] >>28-31 文字で書くより図の方が分かりやすい。
,基本16色 ,X11 色 ,greys ,その他
,"[HTML4] (HTML 3.2, HTML 4, CSS1, CSS2)"
,"[X11] (NC4 以前, IE) " ,==
,"[X11] + [Mozilla] (SVG 1.0, CSS3) " ,== ,==
,X の [CODE(file)[rgb.txt]] ,== ,== ,==
- [33] >>33 スタイル・シート等によっては表の枠線の表示の関係で余計に分かりにくいかも。
- [34] >>33 文書による代替があるので許容ということで。
- [35] [WEAK[2003-02-22 13:34]] ''[[名無しさん]]'': CSS 2.1 (''Syntax and basic data types'' <http://www.w3.org/TR/CSS21/syndata.html#color-units> まだ WD) は [CODE(CSS)[orange]] を17番目の色として追加します。
- [40] >>34 [DEL[文書]] [INS[文字]]
[44]
''ホームページの作り方 その2'' <http://www.itoh.org/io/html/02.html>
(1998年9月8日付け、 [CODE(HTTP)[[[Last-Modified]]]] なし。)
には
[CODE[turkishblue]] という色名を [CODE(HTMLe)[[[font]]]] で使う例が紹介されています。
しかし、この色名は [[Google]] で検索しても他に典拠がまったくみつかりません。
[[WinIE 6]] で表示してみると [CODE[blue]] と同じ色になりました。 [CODE[eblue]] なども同じ色で、 [CODE[blue]] が入っていれば何でも同じなのかと思いきや、 [CODE[gblue]] は別の色で、例の WinIE
の謎の色名算法によって導き出された色がたまたま [CODE[turkishblue]]
だとそれっぽく見えたので筆者が勝手に捏造したのではないかと推察されます。
([[名無しさん]] [WEAK[2004-05-23 23:34:40 +00:00]])
[45]
''Corian Colors'' <http://www.solidsurfacesinc.net/colors/> に [Q[turkishblue]] が載っていますが、
HTML などとは関係なく、単なる見本です。
これを見る限り [Q[turkishblue]] は
[Q[blue]] とは違った色だと思いますが、
>>44 の頁の著者の目は大丈夫でしょうかね。
他にも純粋な色の名前としての用例は幾つか見つかりますが、
HTML で使った勇者は >>44 だけの模様。
([[名無しさん]] [WEAK[2004-05-23 23:37:38 +00:00]])
[[#comment]]
* gray & grey
[8] X11 色には幾つか [CODE[‐gray]] という名前がありますが、このうち
[CODE[lightgrey]] だけ [CODE[‐grey]] になっています。
英語としてはどちらも正しいのですが、 [CODE[lightgray]] を除く [CODE[‐gray]] と
[CODE[lightgrey]] しか対応していない [[UA]] が多いです。
その中には [[M$IE]] と [[NN]]4 も含まれます。
[[Mozilla]] は全てについて [CODE[‐gray]] と [CODE[‐grey]]
に共に対応しています。
- [9] WinIE ではなぜか (無着色ではなく) 全然関係ない色になりますね。どういうアルゴリズムなんだか。
[[#comment]]
* HoneydewTab と HoneydewTad
[11] >>10 に詳しいですが、2つの幻の色名,
[[#form:'%color-example(color=>HoneydewTab);':'':'%output(form=>0);']] と [[#form:'%color-example(color=>HoneydewTad);':'':'%output(form=>0);']]
が''存在''しています。
[12] Mozilla ではこの指定は無視されますが、 WinIE
ではいずれも
[[#form:'%color-example(color=>"#00DEAB");':'':'%output(form=>0);']]
で表示されます。
[13] しかし、 >>10 の考察を読めば分かりますが、 WinIE
もこの色を実装しているわけではありません。
ではなぜそれっぽい色 (いや、 Honeydew = 糖液・蜜に [CODE[#00DEAB]]
がふさわしいのかは謎ですが。) が表示されるのか。
ためしに適当な文字列を入れてみると、その文字列によって色が変化することがわかります。
また、 WinIE は[[互換モード]]では [CODE[#]] がつかない16進表記
(もちろん不正。) も認識するらしいです。
このことから考えると、 WinIE は適当な文字列が指定された場合に、それを頑張って16進の色指定と認識しようとすると思われます。
だとすると >>9 も説明がつきます。
- [14] >>12 WinIE で互換モードでも、 [[CSS]] では無視されるようです。
- [15] >>13 HoneydewTab は鳥名らしいです。
- [17] 検索してみると確かに''日本語サイトに限って''この2つの色名が蔓延してることがわかります。 HoneydewTab が多く (鳥名として正しい綴りだからだろう。), HoneydewTad は少数です。こちらは typo でしょうか。
- [18] >>17 WinIE でしか確認しないで, 他の資料の丸写しで色一覧を作ってる人が多いことがよくわかりますね(w
[50]
[CITE[HTML5 IRC logs: freenode / #whatwg / 20070422]] ([CODE[2007-04-23 00:47:45 +09:00]] 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20070422#l-599>
([[名無しさん]] [WEAK[2007-04-22 15:48:55 +00:00]])
[51]
[CITE[mozilla/gfx/src/nsColor.cpp]] ([CODE[2006-06-23 20:33:26 +09:00]] 版) <http://lxr.mozilla.org/mozilla/source/gfx/src/nsColor.cpp#126>
* 端末でのレンダリング
[61] [CITE@en[GNU `gettext' utilities]] ([TIME[2009-03-20 11:59:11 +09:00]] 版) <http://www.gnu.org/software/gettext/manual/gettext.html#Style-rules>
>Colors will be adjusted to match the terminal's capabilities. Note that many terminals support only 8 colors.
;; [CODE@en[[[msgcat]]]] は [CODE(CSS)@en[[[color]]]] と
[CODE(CSS)@en[[[background-color]]]] に対応しています。
* 歴史
** 色指定の登場
[120] 1995年3月の [[Netscape Navigator 1.1]] ベータ版、4月の [[Netscape Navigator 1.1]]
正式版で色を指定できる [[HTML]] の[[属性]] [CODE(HTMLa)@en[[[text]]]],
[CODE(HTMLa)@en[[[link]]]], [CODE(HTMLa)@en[[[alink]]]], [CODE(HTMLa)@en[[[vlink]]]]
が追加されました。
[122] 説明 [SRC[>>121]] や開発者のメール [SRC[>>123]] によると [[HTML 3.0]] の一部として提案されていた [CODE(HTMLa)@en[[[background]]]] [[属性]]を実装すると[[背景画像]]によって文字が読めなくなる可能性があるため、
[CODE(HTMLa)@en[[[text]]]] なども同時に提案・実装したということのようです。
;; [124] ただし提案は受け入れられないまま [[HTML 3.0]] の標準化自体が破綻することになります。
[125] この時、 [CODE(HTML)@en[#rrggbb]] のような16進数表記が取り入られました。この表記は [[Netscape]]
社内で決められたのか、メーリングリストなどで議論された形跡はありません。また [[Netscape]]
が実装する前に同様の提案や議論がなされた形跡も見当たりません。
[REFS[
- [121] [CITE[Document specific background and foreground control]] ([TIME[2014-04-07 09:20:39 +09:00]] 版) <http://web.archive.org/web/19961020032532/http://www3.netscape.com/assist/net_sites/bg/index.html>
- [123] [CITE@en[Re: color: NCSA Mosaic, Netscape, and HTML3]] ([[Lou Montulli]] 著, [TIME[1995-07-19 10:26:26 +09:00]] 版) <http://lists.w3.org/Archives/Public/www-style/1995Jul/0080.html>
]REFS]
** 色名キーワードの導入
[114] [[X11]] における色名の歴史については、 >>108 と >>112 にまとまっています。
[REFS[
- [108] [CITE[x11 - What are the origins of rgb.txt? - Unix & Linux Stack Exchange]]
( ([TIME[2013-12-07 18:21:22 +09:00]] 版))
<http://unix.stackexchange.com/questions/72919/what-are-the-origins-of-rgb-txt>
- [112] [CITE@en[Re: Last call comments on CSS3 module: color]]
( ([[Alex Sexton]] 著, [TIME[2014-03-13 11:44:50 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-style/2014Mar/0272.html>
]REFS]
[115] [[HTML]] に色名が取り入れられたのが正確にいつなのかははっきりしません。 [[Netscape Navigator 1.1]]
のドキュメントに色名への言及がなく、 [[Netscape Navigator 2.0]] のドキュメント [SRC[>>116]]
には言及があるので、 2.0 で追加された可能性がありますが、追加した旨の記述や色名の一覧は見つかっていません。
[117] [[Netscape Navigator 3.0]] のドキュメント [SRC[>>113]] には色名の一覧があります。
この時には既に色名キーワードの多くが揃っています。
;; 140個定義されています。
;; [126] ちなみに >>116 のドキュメントのリンク先の例示には [CODE(HTML)[#]] のない
[CODE(HTML)[rrggbb]] で色を表した例があって、この当時既に [CODE(HTML)[#]]
がなくても構わない実装になっていたこと、 [[Netscape]] 社内の担当者も正しい表記がわからなくなっていたことがわかりますw
[REFS[
- [116] [CITE[Welcome to Netscape Navigator Version 2.0]] ([TIME[2014-04-07 09:13:32 +09:00]] 版) <http://web.archive.org/web/20030202175634/http://wp.netscape.com/eng/mozilla/2.0/relnotes/windows-2.0.html#Images>
- [113] [CITE[Color values]]
( ([TIME[2014-04-07 08:56:51 +09:00]] 版))
<http://web.archive.org/web/20030212162000/http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/colors.htm>
]REFS]
[118] 90年代にはまだブラウザー間で (もしかしたら [[OS]] 間でも) 色名の種類や解釈に違いがありました。
** 色名キーワードの標準化
[119] 1996年の [[HTML 3.2]] と [[CSS1]] でいわゆる[[基本16色]]が、その数年後の [[SVG 1.0]]
でいわゆる [[X11色]]が標準化されることになります。これらの色がどのような基準で選ばれたのかは明確ではありません。
* メモ
- [16] ''あれこれ/カラーサンプル'' <http://www2.starcat.ne.jp/~master/tips/0003/> 環境による近似色関係の情報もあって有用。
- [26] ''CSS3 module: Color'' <http://www.w3.org/TR/css3-color/>
- [27] >>26 CSS3 は従来の HTML, W3C CSS, 独自拡張 CSS の色関係の指定を整理したうえで更に拡張しています。この [[WD]] 自体が、簡単ではあるものの [[HTML4]] 以降の色関係の指定方法の変化の説明となっています。
- [36] [[XSL]](-FO) の場合。 ''Property Refinement / Resolution'' <http://www.w3.org/TR/xsl/slice5.html>, ''Formatting Properties'' <http://www.w3.org/TR/xsl/slice7.html#section-N42081-Color-related-Properties>, ''Property Refinement / Resolution'' <http://www.w3.org/TR/xsl/slice5.html#section-N8794-Property-Datatypes>
- [37] >>36 基本16色, [CODE(XSL)[#]] の16進数表記, CSS と同様の [[rgb]] 関数, [[rgb-icc]] 関数, [[system-color]] 関数が指定できます。
- [38] ''色指定は正しく指定しましょう - Web標準普及プロジェクト'' <http://www.mozilla.gr.jp/standards/webtips0008.html> [CODE(HTML)[#]] 省略問題について。
- [41] html:[[body]]/@[[bgcolor]] 属性の値に不正な値を指定し場合について。[CODE(HTML)[ ] ([[SP]]) の場合、 [[Mozilla]] 1.3 では既定背景色、 [[WinIE]] 6.0 では黒になりました。 [CODE(HTML)[#]] や [CODE(HTML)[;]] ではどちらの [[UA]] でも黒になりました。なお、利用者指定の既定値や前景色との関係は調べてません。]]
- [42] [CODE(CSS)[[[-moz-Field]]]], [CODE(CSS)[[[-moz-FieldText]]]], ...
[43] HTML の色属性の値は、
最初の [SAMP(HTML)[#]] を省いて指定されることがよくありました。
(もちろん誤り。)
それを「ちゃんと」解釈してくれるブラウザもあるから困った物で。
[46]
[CITE[あまり紹介されていないハイパーテキストタグの説明のページ]] <http://www.geocities.co.jp/Hollywood/9752/tag.html>
(日付なし)
この文書は、 [CODE(HTML)[aliceblue]] が
[[NN]] では緑、 [[IE]] では白であると主張しています。
また、 NN は [CODE(HTML)[elm]] を黒に近い色とする (IE は未対応) と主張しています。
([[名無しさん]] [sage])
[47]
- [CODE(CSS)@en[[[-webkit-link]]]]
- [CODE(CSS)@en[[[-webkit-activelink]]]]
- [CODE(CSS)@en[[[-webkit-focus-ring-color]]]]
- [CODE(CSS)@en[[[-webkit-text]]]]
([[名無しさん]] [sage])
[48]
[CODE(CSS)@en[[[-moz-activehyperlinktext]]]]
([[名無しさん]] [sage])
[49]
[CITE[hxxk.jp - JIS 慣用色の色名と CSS での数値指定との対応表]] <http://hxxk.jp/appendix/2006-06-22-colortable>
([[名無しさん]] [WEAK[2006-08-18 04:34:40 +00:00]])
[52]
,[[CSS]] 上の元の値 ,[[CSSOM]] 上に現れる値 ,== ,== ,== ,== ,==
, ,[[Firefox]] 2 ,== ,[[WinIE 6]] ,== ,[[Opera]] 9 ,==
, ,無奇癖 ,奇癖 ,無奇癖 ,奇癖 ,無奇癖 ,奇癖
,[CODE(CSS)@en[[[red]]]] ,[CODE(CSS)@en[[[red]]]] ,== ,== ,== ,[CODE(CSS)@en[#ff0000]] ,==
,[CODE(CSS)@en[[[ReD]]]] ,[CODE(CSS)@en[[[ReD]]]] ,== ,[CODE(CSS)@en[[[red]]]] ,== ,[CODE(CSS)@en[#ff0000]] ,==
,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]" ,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]" ,== ,"[CODE(CSS)@en[[[rgb]](255,0,0)]]" ,== ,[CODE(CSS)@en[#ff0000]] ,==
,"[CODE(CSS)@en[[[rGb]](255, 0, 0)]]" ,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]" ,== ,"[CODE(CSS)@en[[[rgb]](255,0,0)]]" ,== ,[CODE(CSS)@en[#ff0000]] ,==
,[CODE(CSS)@en[#ff0000]] ,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]" ,== ,[CODE(CSS)@en[#ff0000]] ,== ,== ,==
,[CODE(CSS)@en[#fF0000]] ,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]" ,== ,[CODE(CSS)@en[#ff0000]] ,== ,== ,==
,[CODE(CSS)@en[#f00]] ,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]" ,== ,[CODE(CSS)@en[#f00]] ,== ,[CODE(CSS)@en[#ff0000]] ,==
,[CODE(CSS)@en[#F00]] ,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]" ,== ,[CODE(CSS)@en[#f00]] ,== ,[CODE(CSS)@en[#ff0000]] ,==
,[CODE(CSS)@en[ff0000]] ,([[無視]]) ,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]" ,([[無視]]) ,[CODE(CSS)@en[#ff0000]] ,([[無視]]) ,[CODE(CSS)@en[#ff0000]]
,[CODE(CSS)@en[f00]] ,([[無視]]) ,"[CODE(CSS)@en[[[rgb]](255, 0, 0)]]" ,([[無視]]) ,[CODE(CSS)@en[#f00]] ,([[無視]]) ,[CODE(CSS)@en[#ff0000]]
,[CODE(CSS)@en[[[windowText]]]] ,[CODE(CSS)@en[[[windowtext]]]] ,== ,== ,== ,[CODE(CSS)@en[[[WindowText]]]] ,==
[53]
[CITE[simon.html5.org/test/html/parsing/color-attributes]] ([CODE[2008-01-19 13:46:28 +09:00]] 版) <http://simon.html5.org/test/html/parsing/color-attributes/>
([[名無しさん]])
[54]
[[奇癖モード]]の [[CSS]] [CODE(CSS)@en[<[[color]]>]] [[特性値]]の解釈に関して:
- 1桁・2桁の[[16進数]]の場合
-- [[WinIE 6]] と [[Opera]] 9 は[[宣言]]ごと[[無視]]します。
-- [[Firefox]] 2 は 先頭に [CODE(CSS)[#]] と4〜5個の 0 を補って
6桁の[[16進数]]として解釈します。
- 3桁の[[16進数]] [CODE(CSS)[[VAR[x]][VAR[y]][VAR[z]]]] の場合
-- [[WinIE 6]] と [[Opera]] 9 では
[CODE(CSS)[#[VAR[x]][VAR[y]][VAR[z]]]] =
[CODE(CSS)[#[VAR[x]][VAR[x]][VAR[y]][VAR[y]][VAR[z]][VAR[z]]]] と解釈されます。
-- [[Firefox]] 2 では [CODE(CSS)[#000[VAR[xyz]]]] と解釈されます。
--<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20color%3A%20123%3B%0A%7D%0Aq%20%7B%0A%20%20color%3A%20%23123%3B%0A%7D%0A;h=%3Cp%3Exxxxxxxxxxxxxxxxxxxxxxx;p=q;x=style-element;i=html-div>
- 4桁・5桁の[[16進数]]の場合
-- [[WinIE 6]] は[[宣言]]ごと[[無視]]します。
-- [[Firefox]] 2 は先頭に [CODE(CSS)[#]] と1〜2個の [CODE(CSS)[[[0]]]]
を補って6桁の[[16進数]]として解釈します。
-- [[Opera]] 9 は先頭に [CODE(CSS)[#]] を補い、
最初の3桁''以外''は除去し、3桁の[[16進数]]として解釈します。
- 6桁の[[16進数]]の場合
-- 3ブラウザとも、先頭に [CODE(CSS)[#]] を補って6桁の[[16進数]]として解釈します。
- 7桁以上の[[16進数]]の場合
-- [[WinIE 6]] と [[Firefox]] 2 は[[宣言]]ごと[[無視]]します。
-- [[Opera]] 9 は先頭に [CODE(CSS)[#]] を補い、
最初の6桁''以外''は除去し、6桁の[[16進数]]として解釈します。
;; [[WinIE 6]] が一番まともだとは一体どういうことよw
[55] [CITE[SMIL 3.0 Media Object]] ([TIME[2008-12-02 00:45:09 +09:00]] 版) <http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-extended-media-object.html#edef-brush>
[56] [[SMIL]] [CODE(XMLe)@en[[[blush]]]] [[要素]]の
[CODE(XMLa)@en[[[color]]]] [[属性]]の構文は [CODE(CSS)@en[[[background-color]]]]
と同じになっています。ただし、 [CODE(CSS)@en[[[inherit]]]] は意味を成さないとして禁じられています。
[57] [[Opera]] 9.61 で[[色名]]を [CODE(CSS)@en[[[<color>]]]]
として与えた時に [CODE(DOMa)@en[[[currentStyle]]]]
が返す値は "" で括られています。 [CODE(DOMm)@en[[[getComputedStyle]]]] は正常です。
;; <http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20color%3A%20white%3B%0D%0A%7D;h=%3Cp%3Exxxxx%3Cbutton%20type%3Dbutton%20onclick%3D%22w(this.parentNode.currentStyle.color)%22%3EcurrentStyle.color%3C%2Fbutton%3E%20%3Cbutton%20type%3Dbutton%20onclick%3D%22w(getComputedStyle%20(this.parentNode%2C%20null).color)%22%3EgetComputedStyle.color%3C%2Fbutton%3E%20;p=n;x=style-element;i=html-div>
[58] >>57 [[WinIE7]] は正常でした。
[59] [CITE[Bug 475191 – bgcolor="lightred" mysteriously comes out blue (quirks mode color parsing)]] ([TIME[2009-01-30 23:57:40 +09:00]] 版) <https://bugzilla.mozilla.org/show_bug.cgi?id=475191>
[60] [CITE[IRC logs: freenode / #whatwg / 20090210]] ([TIME[2009-02-12 07:13:29 +09:00]] 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20090210#l-251>
>
-[11:58] <Hixie> zcorpan: have you tested http://simon.html5.org/specs/html-color-attributes against IE by giving it random strings and checking the computed values?
-[13:19] <zcorpan> Hixie: it doesn't match ie when the input is in the format "#rgb"
-[13:19] <zcorpan> Hixie: we changed it to support pages that were written against ie pocket/firefox/safari
-[13:24] <Hixie> no i get fails for other things too
-[13:24] <Hixie> e.g. #3
-[13:28] <Hixie> hm actually the problem is the way i'm reading the colors
-[13:29] <zcorpan> oh yeah, currentStyle is weird in ie
-[13:29] <Hixie> it's saying #3 => #300 instead of #030000
-[13:29] <Hixie> i wonder how to get around that
-[13:30] <zcorpan> use <body bgcolor> and document.bgColor
-[13:30] <Hixie> they serialise differently?
-[13:30] <zcorpan> yes
* [CODE@en[color]] (MathML)
[63] [[MathML]] における [DFN[[CODE[[[color]]]]]] は、[[レンダリング]]に用いる[[色]]を表します。
表現能力としては [[CSS]] における [CODE(CSS)@en[[[<color>]]]] の[[部分集合]]となっていますが、
構文的には厳密には[[部分集合]]ではありません。
** 仕様書
- [62] [CITE[MathML Fundamentals]] ([TIME[2010-10-21 05:51:46 +09:00]] 版) <http://www.w3.org/TR/2010/REC-MathML3-20101021/chapter2.html#fund.color>
** 構文
[64] [CODE@en[[[color]]]] は、次のいずれかの形式で表します [SRC[>>62]]。
- [65] [CODE@en[[[[SPAN[#]][VAR[R]][VAR[G]][VAR[B]]]]]]
- [66] [CODE@en[[[[SPAN[#]][VAR[RR]][VAR[GG]][VAR[BB]]]]]]
- [67] [CODE@en[[VAR[html-color-name]]]]
- [70] [CODE@en[[[transparent]]]] ([[背景色]]でのみ)
[68] >>65, >>66 は [[CSS]] と同じで[[16進数]]によって[[赤]]、[[青]]、[[緑]]の値を指定します。
[69] [DFN[[CODE[html-color-name]]]] は、[[HTML4]] の [CODE(SGML)@en[[[%Color;]]]]
と同じ16色で、[[大文字・小文字を区別しない]]とされています。 [SRC[>>62]]
** 処理モデル
[71] (前景)[[色]]がある[[要素]]に適用されるとすると、その[[色]]は、
[[字句]]の[[内容]]が[[レンダリング]]されるときに使われます。 [SRC[>>62]]
[72] 周りの[[要素]]や、 [[MathML]] [[式]]が埋め込まれている[[環境]]から[[色]]が[[継承]]される場合には、
[[線]]や[[根号]]なども含め、 [[MathML]] の[[要素]]によって[[レンダリング]]されるものすべてに効果が及びます。
[SRC[>>62]]
[73] [[背景色]]は、[[要素]]の[[内容]]の[RUBYB[[[次元]]]@en[dimension]]が[[負]]ではなく、
また[[負]]の[RUBYB[[[間隔付け]]]@en[spacing]]によって他のものと領域が重なっていないのであれば、
その[[要素]]によって[[レンダリング]]がなされるものの裏側で塗られる[RUBYB[べき]@en[should]]であって、
周りのものの裏側は塗られる[RUBYB[べきではありません]@en[should not]]。
そうではなく[[負]]であったりして重なるような場合にどこが塗られるのかは、
[[MthML]] の[RUBYB[推奨]@en[recommended]][[視覚レンダリング]]規則では定めれられていません。
[SRC[>>62]]
[74] [CITE@en[Web Applications 1.0 r5875 Change how canvas serialises alpha<1 colours to match CSS.]]
( ([TIME[2011-02-12 05:36:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=5874&to=5875>
[75] [CITE[''''''[''''''whatwg'''''']'''''' Canvas feedback (various threads)]]
( ([TIME[2011-02-12 10:51:29 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-February/030404.html>
[76] [CITE[''''''[''''''whatwg'''''']'''''' Accept full CSS colors in the legacy color parsing algorithm]]
( ([TIME[2011-04-14 08:58:18 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-April/031181.html>
[100] [CITE[User Interface Enhancements]]
( ([TIME[1999-09-16 05:07:02 +09:00]] 版))
<http://www.w3.org/TR/1999/WD-css3-userint-19990916#color>
[101] [CITE@en[User Interface for CSS3]]
( ([TIME[2000-06-23 03:09:21 +09:00]] 版))
<http://www.w3.org/TR/2000/WD-css3-userint-20000216#color>
[102] [CITE@en[X11 color names - Wikipedia, the free encyclopedia]]
( ([TIME[2012-05-12 16:33:21 +09:00]] 版))
<http://en.wikipedia.org/wiki/X11_color_names>
[103] [CITE@en[Re: color names in SVG-1.0 conflict with /usr/lib/X11/rgb.txt]]
( ([[Chris Lilley]] 著, [TIME[2002-04-24 10:35:13 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-svg/2002Apr/0052.html>
[104] [CITE[Why does HTML think “chucknorris” is a color? - Stack Overflow]]
( ([TIME[2013-01-20 22:42:35 +09:00]] 版))
<http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color/12630675>
[105] [CITE@en[Bug 13639 – CSS2 System Colors Should Be Recognized]]
( ([TIME[2013-01-24 09:01:43 +09:00]] 版))
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=13639>
[109] [CITE@en[Bug 278498 – ''''''[''''''CSS'''''']'''''' CSS support for SWT colour constants]]
( ([TIME[2014-02-04 11:55:02 +09:00]] 版))
<https://bugs.eclipse.org/bugs/show_bug.cgi?id=278498>
[111] [CITE@en[eclipse.platform.ui.git - Eclipse Platform UI]]
( ([TIME[2014-02-04 11:54:59 +09:00]] 版))
<http://git.eclipse.org/c/platform/eclipse.platform.ui.git/commit/?id=8fab17122c0d0e9d0181ef533f0f5d4b56d31092>
[127] [CITE[IRC logs: freenode / #whatwg / 20140430]]
( ([TIME[2014-05-01 16:26:02 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20140430>
[128] [CITE@en[Web Applications 1.0 r8815 Fix some stale links to TR/ pages to be stable links to W3C living standards]]
( ([TIME[2014-09-25 07:13:00 +09:00]] 版))
<https://html5.org/r/8815>
[129] [CITE@en[Re: ''''''[''''''css-color'''''']'''''' Exposing "brand"/"accent" color]]
( ([[fantasai]] 著, [TIME[2014-10-16 09:52:19 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-style/2014Oct/0298.html>