-
Notifications
You must be signed in to change notification settings - Fork 637
/
Overview.bs
7101 lines (6105 loc) · 334 KB
/
Overview.bs
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
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<pre class=metadata>
Title: CSS Color Module Level 4
Status: ED
Prepare for TR: no
Work Status: Testing
ED: https://drafts.csswg.org/css-color-4/
TR: https://www.w3.org/TR/css-color-4/
Previous Version: https://www.w3.org/TR/2022/CR-css-color-4-20221101/
Shortname: css-color
Group: csswg
Level: 4
Implementation Report: https://wpt.fyi/results/css/css-color
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact, w3cid 42199
Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438
Editor: Lea Verou, Invited Expert, http://lea.verou.me/, w3cid 52258
Former Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
Abstract: This specification describes CSS <<color>> values, and properties for foreground color and group opacity.
Repository: w3c/csswg-drafts
Ignored Terms: double, octet
Complain About: missing-example-ids true
Complain About: broken-links false
Complain About: accidental-2119 true
Inline Github Issues: title
Default Highlight: css
WPT Path Prefix: css/css-color/
WPT Display: open
At Risk: Equivalence of deprecated and un-deprecated system colors
</pre>
<pre class="link-defaults">
spec: css22; type: dfn; text: stacking context
</pre>
<!-- see wpt results
https://wpt.fyi/results/css/css-color?label=master&label=experimental&aligned&q=css%2Fcss-color%2Fdeprecated*
-->
<pre class=biblio>
{
"TIFF": {
"href": "https://www.loc.gov/preservation/digital/formats/fdd/fdd000022.shtml",
"title": "TIFF Revision 6.0",
"date": "3 June 1992"
},
"Sharma": {
"href": "http://www2.ece.rochester.edu/~gsharma/ciede2000/",
"title": "The CIEDE2000 Color-Difference Formula: Implementation Notes, Supplementary Test Data, and Mathematical Observations",
"authors": ["G. Sharma", "W. Wu", "E. N. Dalal"],
"journal": "Color Research and Application, vol. 30. No. 1, pp. 21-30",
"date": "February 2005"
},
"Oklab": {
"href": "https://bottosson.github.io/posts/oklab/",
"title": "A perceptual color space for image processing",
"authors": ["Björn Ottosson"],
"date": "December 2020"
},
"HSL": {
"title": "Color spaces for computer graphics",
"authors": ["George H. Joblove, Donald Greenberg"],
"journal": "ACM SIGGRAPH Computer Graphics Volume 12 Issue 3 pp 20–25",
"date": "August 1978",
"href": "https://doi.org/10.1145/965139.807362"
},
"HWB": {
"title": "HWB — A More Intuitive Hue-Based Color Model",
"authors": ["Alvy Ray Smith"],
"journal": "Journal of Graphics, GPU and Game tools. 1 (1): 3–17 ",
"date": "1996",
"href": "http://alvyray.com/Papers/CG/HWB_JGTv208.pdf"
},
"Display-P3": {
"title": "Display P3",
"authors": ["Apple, Inc"],
"date": "2022-02",
"publisher": "ICC",
"href": "https://www.color.org/chardata/rgb/DisplayP3.xalter"
},
"Wolfe": {
"title": "Design and Optimization of the ProPhoto RGB Color Encodings",
"authors": ["Geoff Wolfe"],
"date": "2011-12-21",
"href": "http://www.realtimerendering.com/blog/2011-color-and-imaging-conference-part-vi-special-session/"
},
"ROMM": {
"title": "ISO 22028-2:2013 Photography and graphic technology — Extended colour encodings for digital image storage, manipulation and interchange — Part 2: Reference output medium metric RGB colour image encoding (ROMM RGB)",
"date": "2013-04",
"publisher": "ISO",
"href": "https://www.iso.org/standard/56591.html"
},
"ROMM-RGB": {
"title": "ROMM RGB",
"publisher": "ICC",
"href": "https://www.color.org/chardata/rgb/rommrgb.xalter"
}
}
</pre>
<link rel="stylesheet" href="style.css" />
<style>
table.named-color-table thead th { text-align:center; background:var(--text); color:var(--bg); }
table.named-color-table th, table.named-color-table td { padding: 0 .25em; }
table.named-color-table td { text-align:center; text-transform:uppercase; }
table.named-color-table td:nth-child(-n+2) { border:1px solid var(--text); }
/* table.named-color-table td:nth-child(n+4) { background: ; } */
.color-table {
background: rgb(46.63% 46.63% 46.63%);
color: black;
display: table;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 0.5em;
gap: 2em;
}
.color-table table { padding:1em; margin:0; table-layout: fixed; }
.color-table td, .color-table th { font-size:smaller; }
.color-table th { white-space: pre-line; }
.color-table td { padding: .75em; }
.color-table .white { color: white; }
table.deltaE td {border: 4px solid white; padding: 6px; font-size: 1.4em;}
table.deltaE td.dE0 { background: rgb(68, 243, 91)}
table.deltaE td.dE1 { background: rgb(153, 243, 68)}
table.deltaE td.dE2 { background: rgb(217, 243, 68)}
table.deltaE td.dE3 { background: rgb(243, 240, 68)}
table.deltaE td.dE4 { background: rgb(243, 202, 68)}
table.deltaE td.dE5 { background: rgb(243, 103, 68); color: white}
/* work-around for https://github.com/tabatkins/bikeshed/issues/1799 */
div.example {
overflow: visible;
}
div.example>a.self-link::before {
content: "¶";
}
</style>
<script>
document.addEventListener("DOMContentLoaded", ()=>{
for (let e of document.querySelectorAll(".swatch")) {
e.tabIndex = "0";
const swatchColor = getComputedStyle(e).getPropertyValue("--color");
if (!CSS.supports('color', swatchColor)) {
e.style.background = "repeating-linear-gradient(135deg, red 0, red 4px, white 4px, white 8px)";
e.setAttribute("title", "Your browser does not recognize this color value, so we can't preview it.");
}
}
});
</script>
<h2 id="introduction">
Introduction</h2>
<em>This section is not normative.</em>
This module describes CSS properties which
allow authors to specify
the foreground color and opacity of the text content of an element.
This module also describes in detail the CSS <<color>> value type.
It not only defines the color-related properties and values that
already exist in <a href="https://www.w3.org/TR/CSS1">CSS1</a>, <a
href="https://www.w3.org/TR/CSS2/">CSS2</a>,
and <a href="https://www.w3.org/TR/css-color-3/">CSS Color 3</a>,
but also defines new properties and values.
In particular, it allows specifying colors
in other [=color spaces=] than sRGB;
previously, the more saturated colors outside the sRGB gamut
could not be used in CSS
even if the display device supported them.
A <a href="https://test.csswg.org/harness/results/css-color-4_dev/grouped/">draft implementation report</a> is available.
<h3 id="values">
Value Definitions</h3>
This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].
Value types not defined in this specification are defined in CSS Values & Units [[!CSS-VALUES-3]].
Combination with other CSS modules may expand the definitions of these value types.
In addition to the property-specific values listed in their definitions,
all properties defined in this specification
also accept the <a>CSS-wide keywords</a> as their property value.
For readability they have not been repeated explicitly.
<!--
████████ ████████ ████████ ██ ██ ██████
██ ██ ██ ██ ███ ███ ██ ██
██ ██ ██ ██ ████ ████ ██
██ ██████ ████████ ██ ███ ██ ██████
██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██
██ ████████ ██ ██ ██ ██ ██████
-->
<h2 id="terminology">Color Terminology</h2>
A <dfn export>color</dfn> is a definition (numeric or textual)
of the human visual perception of a light
or a physical object illuminated with light.
The objective study of human color perception is termed
<abbr title="colorimetry is the measurement of human color perception">colorimetry</abbr>.
The color of a physical object
depends on how much light it reflects
at each visible wavelength,
plus the actual color of the light illuminating it
(again, the amount of light at each wavelength).
It is measured by a <em>spectrophotometer </em>.
The color of something that emits light
(including colors on a computer screen)
depends on how much light it emits
at each visible wavelength.
It is measured by a <em>spectroradiometer</em>.
If two objects have different
<abbr title="the amount of light at each wavelength">spectra</abbr>,
but still produce the same physical sensation,
we say they have the same color.
We can calculate whether two colors are the same
by converting the spectra to CIE XYZ
(three numbers).
<div class="example" id="ex-cal-leaf">For example a green leaf, a photograph of that leaf
displayed on a computer screen, and a print of that photograph,
are all producing a green sensation by different means.
If the screen and the printer are [=calibrated=],
the green in the leaf, and the photo, and the print will look the same.
</div>
A <dfn export>color space</dfn> is an organization of colors
with respect to an underlying
<abbr title="colorimetry is the measurement of human color perception">colorimetric</abbr>
model,
such that there is a clear, objectively-measurable meaning
for any color in that color space.
This also means that the same color can be expressed in multiple color spaces,
or transformed from one color space to another,
while still looking the same.
<div class="example" id="ex-leaf-spectro"><p>A leaf is measured
with a spectrophotometer
and found to have the color
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> lch(51.2345% 21.2 130)
which is
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> lab(51.2345% -13.6271 16.2401).</p>
<p>This same color could be expressed in various color spaces:</p>
<pre class="lang-css">
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> color(sRGB 0.41587 0.503670 0.36664);
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> color(display-p3 0.43313 0.50108 0.37950);
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> color(a98-rgb 0.44091 0.49971 0.37408);
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> color(prophoto-rgb 0.36589 0.41717 0.31333);
<span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> color(rec2020 0.42210 0.47580 0.35605);
</pre>
</div>
An <dfn export>additive color space</dfn>
means that the coordinate system is linear in light intensity.
The <abbr title="International Commission on Illumination, = Commission internationale de l'éclairage (in French)">CIE</abbr>
XYZ color space is an additive color space
(in addition, the Y component of XYZ is the
<abbr title="the intensity per unit area, or 'how bright it is'">luminance</abbr>).
In an additive color space, calculations can be done
to accurately predict color mixing. Most RGB spaces
are not additive, because the components are
<em>gamma encoded</em>. Undoing this gamma encoding
produces linear-light values.
<div class="example" id="ex-additivity">
For example, if a light fixture contains two identical colored lights,
and only one is switched on,
and the color is measured to be
<span class="swatch" style="--color: rgb(47.74% 35.59% 21.53%)"></span> color(xyz 0.13 0.12 0.04),
then the color when both are switched on will be exactly twice that,
<span class="swatch" style="--color: rgb(65.57% 49.35% 30.58%)"></span> color(xyz 0.26 0.24 0.08).
If we have two differently colored spotlights shining on a stage,
and one has the measured value
<span class="swatch" style="--color: rgb(0% 60.02% 47.86%)"></span>
color(xyz 0.15 0.24 0.17)
while the other is
<span class="swatch" style="--color: rgb(50.45% 9.53% 31.04%)"></span>
color(xyz 0.11 0.06 0.06)
then we can accurately predict that if the colored beams are made to overlap,
the color of the mixture will be the sum
of the XYZ component values, or
<span class="swatch" style="--color: rgb(75.5% 51.71% 56.61%)"></span>
color(xyz 0.26 0.30 0.23).
</div>
A <dfn export>chromaticity</dfn> is a color measurement
where the lightness component has been factored out.
From the identical lights example above,
the <em>u',v'</em> chromaticity with one light is
(0.2537, 0.5268)
and the chromaticity is the same with both lights
(they are the same color, it is just brighter).
Chromaticities are additive,
so they accurately predict
the chromaticity (but not the resulting lightness)
of a mixture.
Being two-dimensional, chromaticity is easily represented
on a <em>chromaticity diagram</em>
to predict the chromaticity of a color mixture.
Any two colors can be mixed, and the resulting colors
will lie on the line joining them on the diagram.
Three colors form a plane, and the resulting colors
will lie in the triangle they form on the diagram.
<figure>
<img src="images/UCS-display-p3.svg"
width=500 height=464
alt="uv chromaticity diagram of the display-p3 color space">
<figcaption>A chromaticity diagram showing
(in solid colors) the ''display-p3'' color space
and for comparison
(faded) the ''sRGB'' color space.
The white point (D65) is also shown.
</figcaption>
</figure>
RGB color spaces are additive,
and their gamut is defined
by the chromaticities of the red, green and blue primaries,
plus the chromaticity of the <dfn export>white point</dfn>
(the color formed by all three primaries at full intensity).
Most color spaces use one of a few
daylight-simulating [=white points=],
which are named by the color temperature
of the corresponding black-body radiator.
For example, [=D65=] is a daylight whitepoint
corresponding to a correlated color temperature
of 6500 Kelvin
(actually 6504,
because the value of Plank's constant has changed
since the color was originally defined).
To avoid cumulative round-trip errors,
it is important that the identical chromaticity values
are used consistently,
at all places in a calculation. Thus,
for maximum compatibility,
for this specification,
the following two standard
daylight-simulating [=white points=] are defined:
<table class="data">
<thead>
<tr>
<th>Name </th>
<th>x</th>
<th>y</th>
<th>CCT</th>
</tr>
</thead>
<tbody>
<tr>
<td><dfn export lt="D50 whitepoint" local-lt="D50">D50</dfn></td>
<td>0.345700</td>
<td>0.358500</td>
<td>5003K</td>
</tr>
<tr>
<td><dfn export lt="D65 whitepoint" local-lt="D65">D65</dfn></td>
<td>0.312700</td>
<td>0.329000</td>
<td>6504K</td>
</tr>
</tbody>
</table>
When the measured physical characteristics
(such as the <abbr title="measured color, irrespective of lightness">chromaticities</abbr> of the primary colors it uses,
or the colors produced in response to a given set of inputs)
of a [=color space=] or a color-producing device are known,
it is said to be <dfn export>characterized</dfn>.
If in addition adjustments have been made so that a device meets calibration targets
such as white point, neutrality of greys, predictability and consistency of tone response,
then it is said to be <dfn export>calibrated</dfn>.
Real physical devices cannot yet produce every possible color that the human eye can see.
The range of colors that a given device can produce is termed the <dfn export>gamut</dfn>
<em>(not to be confused with gamma)</em>.
Devices with a limited gamut cannot produce very saturated colors,
like those found in a rainbow.
The gamuts of different [=color space=]s may be compared
by looking at the volume (in cubic Lab units) of colors that can be expressed.
The following table examines the <a href="#predefined">predefined</a> color spaces available in CSS.
<table class=gamuts>
<tr>
<th>color space</th>
<th>Volume (million Lab units)</th>
</tr>
<tr>
<td>sRGB</td>
<td>0.820</td>
</tr>
<tr>
<td>display-p3</td>
<td>1.233</td>
</tr>
<tr>
<td>a98-rgb</td>
<td>1.310</td>
</tr>
<tr>
<td>prophoto-rgb</td>
<td>2.896</td>
</tr>
<tr>
<td>rec2020</td>
<td>2.042</td>
</tr>
</table>
A color in CSS is either an <dfn export>invalid color</dfn>,
as described below for each syntactic form,
or a [=valid color=].
Any color which is not an [=invalid color=] is a <dfn export>valid color</dfn>.
A color may be a [=valid color=]
but still be outside the range of colors
that can be produced by an output device
(a screen, projector, or printer)
<!-- unbounded hsl
or the range of colors that may be represented by a given color model
(for example HSL or HWB). -->
It is said to be <dfn export>out of gamut</dfn>.
Each [=valid color=] is either <dfn export>in-gamut</dfn>
for a particular output device (screen, or printer)
<!-- unbounded hsl or color space, -->
or it is [=out of gamut=].
<div class="example" id="ex-oog">
For example, given a screen which covers 100% of the display-p3 color space,
but no more, the following color is out of gamut:
<pre>
<span class="swatch oog" style="--color: rgb(100% 49.562% 17.429%)"></span> color(prophoto-rgb 0.88 0.45 0.10)
</pre>
because, expressed in display-p3,
one or more coordinates are either greater that 1.0 or less than 0.0:
<pre>
<span class="swatch oog" style="--color: rgb(100% 49.562% 17.429%)"></span> color(display-p3 1.0844 0.43 0.1)
</pre>
This color is valid,
and could, for example, be used as a gradient stop,
but would need to be <a>CSS gamut mapped</a> for display,
producing a similar-looking but lower chroma (less saturated) color.
</div>
<!--
███ ████████ ████████ ██ ██ ██ ████ ██ ██ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ████ ██ ████ ██ ██
██ ██ ████████ ████████ ██ ██ ██ ██ ██ ██ ██ ████
█████████ ██ ██ ██ ██ ██ ██ ████ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██
██ ██ ██ ██ ████████ ██ ████ ██ ██ ██████
-->
<h2 id="applying-color">Applying Color in CSS</h2>
<!--
███ ██ ██ ██ ██
██ ██ ████ ████ ██ ██
██ ██ ██ ██ ████
██ ██ ██ ██ ██
█████████ ██ ██ ██
██ ██ ██ ██ ██
██ ██ ██████ ██████ ██
-->
<h3 id="accessibility">
Accessibility and Conveying Information By Color</h3>
Although colors can add significant information to documents
and make them more readable,
color by itself should not be the sole means to convey important information.
Authors should consider the W3C Web Content Accessibility Guidelines [[WCAG21]]
when using color in their documents.
> <a href="https://www.w3.org/TR/WCAG21/#use-of-color"><em>1.4.1 Use of Color:</em>
> Color is not used as the only visual means of conveying information,
> indicating an action, prompting a response, or distinguishing a visual element</a>
<!--
██████ ███████ ██ ███████ ████████ ████████ ████████ ███████ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ████████ ████████ ████████ ██ ██ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ███████ ████████ ███████ ██ ██ ██ ██ ██ ███████ ██
-->
<h3 id="the-color-property">
Foreground Color: the 'color' property</h3>
<pre class=propdef>
Name: color
Value: <<color>>
Initial: CanvasText
Applies to: all elements and text
Inherited: yes
Percentages: N/A
Computed value: computed color, see <a href="#resolving-color-values">resolving color values</a>
Animation type: by computed value type
</pre>
<wpt>
color-001.html
color-002.html
color-003.html
inheritance.html
animation/color-interpolation.html
color-initial-canvastext.html
parsing/color-valid.html
parsing/color-invalid.html
</wpt>
This property specifies the primary foreground color of the element.
This is used as the fill color of its text content,
and in addition specifies the [=used value=]
that ''color/currentcolor'' resolves to,
which allows indirect references to this foreground color
and affects the initial values of various other color properties
such as 'border-color' and 'text-emphasis-color'.
<dl>
<dt><<color>>
<dd>Sets the primary foreground color to the specified <<color>>.
</dl>
<div class="example" id="ex-lime">
The <<color>> type provides multiple ways to syntactically specify a given color.
For example, the following declarations all specify the sRGB color “lime”:
<pre class="lang-css">
em { color: <span class="swatch" style="--color: lime"></span> lime; } /* color keyword */
em { color: <span class="swatch" style="--color: lime"></span> rgb(0 255 0); } /* RGB range 0-255 */
em { color: <span class="swatch" style="--color: lime"></span> rgb(0% 100% 0%); } /* RGB range 0%-100% */
em { color: <span class="swatch" style="--color: lime"></span> color(sRGB 0 1 0); } /* sRGB range 0.0-1.0 */
</pre>
</div>
When applied to text, this property, including its alpha component,
has no effect on “color glyphs” (such as the emoji in some fonts),
which are colored by a built-in palette.
However, some colored fonts are able to refer to a contextual “foreground color”,
such as by palette entry ''0xFFFF'' in the <code>COLR</code> table of OpenType,
or by the ''context-fill'' value in SVG-in-OpenType.
In such cases, the foreground color is set by this property,
identical to how it sets the ''<color>/currentcolor'' value.
<!--
███████ ████████ ███ ██████ ████ ████████ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ████
██ ██ ████████ ██ ██ ██ ██ ██ ██
██ ██ ██ █████████ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
███████ ██ ██ ██ ██████ ████ ██ ██
-->
<h3 id="transparency">
Transparency: the 'opacity' property</h3>
Opacity can be thought of as a postprocessing operation.
Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image,
the opacity setting specifies how to blend the offscreen rendering into
the current composite rendering.
See <a href="#alpha">simple alpha compositing</a> for details.
<pre class=propdef>
Name: opacity
Value: <<alpha-value>>
Initial: 1
Applies to: all elements
Inherited: no
Percentages: map to the range [0,1]
Computed value: specified number, clamped to the range [0,1]
Animation type: by computed value type
</pre>
<wpt>
parsing/opacity-computed.html
parsing/opacity-valid.html
parsing/opacity-invalid.html
composited-filters-under-opacity.html
filters-under-will-change-opacity.html
animation/color-composition.html
animation/opacity-interpolation.html
canvas-change-opacity.html
animation/opacity-animation-ending-correctly-001.html
animation/opacity-animation-ending-correctly-002.html
</wpt>
<dl>
<dt><<alpha-value>>
<dd>
The opacity to be applied to the element.
It is interpreted identically to its definition in ''rgb()'',
except that the resulting opacity is applied to the entire element,
rather than a particular color.
</dl>
<wpt>
inline-opacity-float-child.html
</wpt>
The 'opacity' property applies the specified opacity to the element <em>as a whole</em>,
including its contents,
rather than applying it to each descendant individually.
This means that, for example,
an opaque child occluding part of the element's background will continue to do so even when 'opacity' is less than 1,
but the element and child as a whole will show the underlying page through themselves.
<!-- needs a code example and rendered result for those two cases -->
It also means that the glyphs
corresponding to all characters in the element
are treated <em>as a whole</em>;
any overlapping portions do not increase the opacity.
<wpt>
opacity-overlapping-letters.html
</wpt>
<figure id="arabic-opacity-rendering">
<img src="images/joining-and-transparency.svg" width=713 height=156
alt="overlapping glyphs rendered correctly, and incorrectly">
<figcaption>
Correct and incorrect rendering of text
with an 'opacity' value of less than one,
whose glyphs overlap.
</figcaption>
</figure>
If separate opacity for each glyph is desired,
it can be achieved by using a color value
which includes opacity,
rather than setting the 'opacity' property.
If a box has 'opacity' less than 1,
it forms a <a>stacking context</a> for its children.
(This prevents its contents from interleaving in the z-axis
with content outside it.)
<wpt>
body-opacity-0-to-1-stacking-context.html
</wpt>
Furthermore, if the 'z-index' property applies to the box,
the ''z-index/auto'' value is treated as ''0'' for the element;
it is otherwise painted on the same layer within its parent stacking context
as positioned elements with stack level 0
(as if it were a positioned element with ''z-index:0'').
See <a href="https://www.w3.org/TR/CSS21/visuren.html#layers">section 9.9</a>
and <a href="https://www.w3.org/TR/CSS21/zindex.html">Appendix E</a> of [[!CSS2]]
for more information on stacking contexts.
These rules about z-order do not apply to SVG elements,
since SVG has its own <a href="https://www.w3.org/TR/SVG11/render.html">rendering model</a> ([[!SVG11]], Chapter 3).
<!--
████████ ███ ██████ ██████ ████████ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ████ ██ ████ ██████ ██ ██
██ █████████ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██████ ██████ ████████ ████████
-->
<h3 id="tagged-images">Color Space of Tagged Images</h3>
An <dfn export>tagged image</dfn> is an image
that is explicitly assigned a color profile,
as defined by the image format.
This is usually done by including an
International Color Consortium (ICC) profile [[!ICC]].
For example JPEG [[JPEG]], PNG [[PNG]] and TIFF [[TIFF]]
all specify a means to embed an ICC profile.
Image formats may also use other, equivalent methods, often for brevity.
For example, PNG specifies a means (the
<a href="https://www.w3.org/TR/PNG/#11sRGB">sRGB chunk</a>)
to explicitly tag an image as being in the sRGB color space,
without including the sRGB ICC profile.
Tagged RGB images,
and tagged images using a transformation of RGB such as YCbCr,
if the color profile or other identifying information is valid,
must be treated as being in the specified color space.
<wpt>
tagged-images-001.html
tagged-images-002.html
tagged-images-003.html
tagged-images-004.html
</wpt>
If the color profile or other identifying information is invalid, the image is treated as [=untagged images=]
For example, when a browser running on a system with a Display P3 monitor
displays an JPEG image
tagged as being in the ITU Rec BT.2020 [[!Rec.2020]]
color space, it must convert the colors
from ITU Rec BT.2020 to Display P3
so that they display correctly.
It must not treat the ITU Rec BT.2020 values
as if they were Display P3 values, which would produce incorrect colors.
<!--
██ ██ ██ ██ ████████ ███ ██████ ██████ ████████ ████████
██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ████ ██████ ██ ██
██ ██ ██ ████ ██ █████████ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
███████ ██ ██ ██ ██ ██ ██████ ██████ ████████ ████████
-->
<h3 id='untagged'>
Color Spaces of Untagged Colors</h3>
Colors specified in HTML,
and [=untagged images=] must be treated
as being in the sRGB color space ([[!SRGB]])
unless otherwise specified.
<wpt>
untagged-images-001.html
</wpt>
An <dfn export>untagged image</dfn> is an image that is not explicitly assigned a color profile, as defined by the image format.
Note that this rule does not apply to untagged videos, since
<dfn export>untagged video</dfn> should be presumed to be in an ITU-defined color space.
* At below 720p, it is Recommendation ITU-R BT.601 [[!ITU-R-BT.601]]
* At 720p, it is SMPTE ST 296 (same colorimetry as 709) [[!SMPTE296]]
* At 1080p, it is Recommendation ITU-R BT.709 [[!ITU-R-BT.709]]
* At 4k (UHDTV) and above, it is ITU-R BT.2020 [[!Rec.2020]] for SDR video
<!--
██████ ███████ ██ ███████ ████████ ████████ ██ ██ ████████ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██
██ ██ ██ ██ ██ ██ ████████ ██ ██ ████████ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ███████ ████████ ███████ ██ ██ ██ ██ ██ ████████
-->
<h2 id='color-type'>
Representing Colors: the <<color>> type</h2>
Colors in CSS are represented as a list of color components,
also sometimes called “channels”,
representing axises in the color space.
Each channel has a minimum and maximum value,
and can take any value between those two.
Additionally, every color is accompanied by
an <dfn lt="alpha channel | alpha component" export>alpha component</dfn>,
indicating how transparent it is,
and thus how much of the backdrop one can see through the color.
CSS has several syntaxes for specifying color values:
* the sRGB [=hex color notation=]
which represents the RGB and alpha channels in hexadecimal notation
* the various [=color functions=]
which can represent colors using a variety of color spaces and coordinate systems
* the constant [=named color=] keywords
* the variable <<system-color>> keywords and ''currentColor'' keyword.
The <dfn>color functions</dfn>
use CSS [=functional notation=]
to represent colors in a variety of [=color spaces=]
by specifying their channel coordinates.
Some of these use a <dfn export>cylindrical polar color</dfn> model,
specifying color by a <<hue>> angle,
a central axis representing lightness
(black-to-white),
and a radius representing saturation or chroma
(how far the color is from a neutral grey).
The others use a <dfn export>rectangular orthogonal color</dfn> model,
specifying color using three
orthogonal component axes.
The [=color functions=] available in Level 4 are
* ''rgb()'' and its ''rgba()'' alias,
which (like the [=hex color notation=]) specify sRGB colors directly
by their red/green/blue/alpha channels.
* ''hsl()'' and its ''hsla()'' alias,
which specify sRGB colors
by hue, saturation, and lightness
using the [[#the-hsl-notation|HSL]] cylindrical coordinate model.
* ''hwb()'',
which specifies an sRGB color
by hue, whiteness, and blackness
using the [[#the-hwb-notation|HWB]] cylindrical coordinate model.
* ''lab()'',
which specifies a CIELAB color
by CIE Lightness and its a- and b-axis hue coordinates
(red/green-ness, and yellow/blue-ness)
using the [[#cie-lab|CIE LAB rectangular coordinate model]].
* ''lch()'' ,
which specifies a CIELAB color
by CIE Lightness, Chroma, and hue
using the [[#cie-lab|CIE LCH cylindrical coordinate model]]
* ''oklab()'',
which specifies an Oklab color
by Oklab Lightness and its a- and b-axis hue coordinates
(red/green-ness, and yellow/blue-ness)
using the [[#ok-lab|Oklab]] rectangular coordinate model.
* ''oklch()'' ,
which specifies an Oklab color
by Oklab Lightness, Chroma, and hue
using the [[#ok-lab|Oklch]] cylindrical coordinate model.
<!--
* ''device-cmyk()'',
which specifies a device-specific CMYK color
by its cyan, magenta, yellow, and black components.
-->
* ''color()'',
which allows specifying colors in a variety of color spaces
including
[[#predefined-sRGB|sRGB]],
[[#predefined-sRGB-linear|Linear-light sRGB]],
[[#predefined-display-p3|Display P3]],
[[#predefined-a98-rgb|A98 RGB]],
[[#predefined-prophoto-rgb|ProPhoto RGB]],
[[#predefined-rec2020|ITU-R BT.2020-2]],
and
[[#predefined-xyz|CIE XYZ]].
For easy reference in other specifications,
<dfn export>opaque black</dfn> is defined as the color <nobr>''rgb(0 0 0 / 100%)''</nobr>;
<dfn export>transparent black</dfn> is the same color,
but fully transparent--
i.e. <nobr>''rgb(0 0 0 / 0%)''</nobr>.
<h3 id="color-syntax">The <<color>> syntax</h3>
Colors in CSS are represented by the <dfn export><<color>></dfn> type:
<pre class='prod'>
<color> = <<absolute-color-base>> | currentcolor | <<system-color>> <!-- | <<device-cmyk()>> -->
<dfn export><absolute-color-base></dfn> = <<hex-color>> | <<absolute-color-function>> | <<named-color>> | transparent
<dfn export><absolute-color-function></dfn> = <<rgb()>> | <<rgba()>> |
<<hsl()>> | <<hsla()>> | <<hwb()>> |
<<lab()>> | <<lch()>> | <<oklab()>> | <<oklch()>> |
<<color()>>
</pre>
The <<hsl()>>, <<hsla()>>, <<hwb()>>, <<lch()>>, and <<oklch()>> [=color functions=]
are [=cylindrical polar color=] representations using a <<hue>> angle;
the other [=color functions=] use [=rectangular orthogonal color=] representations.
<h4 id="color-syntax-modern">
Modern (Space-separated) Color Function Syntax</h4>
All of the <<absolute-color-function>> syntactic forms
defined in this specification
use the <dfn export>modern color syntax</dfn>,
meaning:
* color components are separated by whitespace
* the optional alpha term is separated by a solidus ("/")
* minimum required precision <a href="#serializing-color-values">when serializing</a> is defined,
and may be greater than 8 bits per component
* the ''none'' value is allowed, to represent [=missing components=]
* components using <<percentage>> and <<number>> may be freely mixed
<div class=example id="example-modern-syntax">
<p>The following represents a saturated sRGB red that is 50% opaque:
<pre>rgb(100% 0% 0% / 50%)</pre>
</div>
<h4 id="color-syntax-legacy">
Legacy (Comma-separated) Color Function Syntax</h4>
For Web compatibility,
the syntactic forms
of ''rgb()'', ''rgba()'', ''hsl()'', and ''hsla()'',
<!-- of ''rgb()'', ''rgba()'', ''hsl()'', ''hsla()'', and ''device-cmyk()'' -->
(those defined in earlier specifications)
also support a
<dfn export>legacy color syntax</dfn>
which has the following differences:
* color components are separated by commas
(optionally preceded and/or followed by whitespace)
* non-opaque forms use a separate notation
(for example ''hsla()'' rather than ''hsl()'')
and the alpha term is separated by commas
(optionally preceded and/or followed by whitespace)
* minimum required precision is lower, 8 bits per component
* the ''none'' value is not allowed
* color components must be specified using either all-<<percentage>>
or all-<<number>>, they can not be mixed.
<div class=example id="example-rgba-legacy">
<p>The following represents a saturated sRGB red that is 50% opaque:
<pre>rgba(100%, 0%, 0%, 0.5)</pre>
</div>
For the [=color functions=] introduced
in this or subsequent levels,
where there is no Web compatibility issue,
the <a>legacy color syntax</a> is invalid.
<h3 id="alpha-syntax">
Representing Transparency: the <<alpha-value>> syntax</h3>
<pre class="prod">
<dfn><alpha-value></dfn> = <<number>> | <<percentage>>
</pre>
Opacity in CSS is typically represented using the <<alpha-value>> syntax,
for example in the 'opacity' property
or as the [=alpha component=] in a [=color function=].
Represented as a <<number>>, the useful range of the value is ''0''
(representing full transparency)
to ''1''
(representing full opacity).
It can also be written as a <<percentage>>,
which [=computed value|computes to=]
the equivalent <<number>>
(''0%'' to ''0'', ''100%'' to ''1'').
Unless otherwise specified,
an <<alpha-value>> component defaults to ''100%'' when omitted.
Values outside the range [0,1] are not invalid,
but are clamped to that range at parsed-value time.
<h3 id="hue-syntax">
Representing Cylindrical-coordinate Hues: the <<hue>> syntax</h3>
Hue is represented as an angle of the color circle
(the rainbow, twisted around into a circle, and with purple added between violet and red).
<pre class='prod'>
<dfn><hue></dfn> = <<number>> | <<angle>>
</pre>
Because this value is so often given in degrees,
the argument can also be given as a number,
which is interpreted as a number of degrees
and is the [=canonical unit=].
This number is normalized
to the range [0,360].
Note: The angles and spacing
corresponding to particular hues
depend on the color space.
For example, in HSL and HWB, which use the sRGB color space,
sRGB green is 120 degrees.
In LCH, sRGB green is 134.39 degrees,
display-p3 green is 136.01 degrees,
a98-rgb green is 145.97 degrees
and prophoto-rgb green is 141.04 degrees
(because these are all different shades of green).
<<hue>> components are the most common components to become [=powerless=];
any achromatic color will have a [=powerless=] hue component.
<h3 id="missing">
“Missing” Color Components and the ''none'' Keyword</h3>