[css-color-4] add more explanation

Author: svgeesus

css-color-4/Overview.bs

@@ -117,7 +117,7 @@ Value Definitions</h3>
 
 <h2 id="terminology">Color terminology</h2>
 
-	A <dfn>color</dfn> is a definition (numeric or textual)
+	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
@@ -163,8 +163,52 @@ Value Definitions</h3>
 
 	</div>
 
+	An <dfn export>additive colorspace</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 colorspace is an additive colorspace
+	(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 colorspace, 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 idential 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).
+
+
 	When the measured physical characteristics
-	(such as the chromaticities of the primary colors it uses,
+	(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 [=colorspace=] or a color-producing device are known,
 	it is said to be <dfn export>characterized</dfn>.
@@ -182,7 +226,7 @@ Value Definitions</h3>
 	like those found in a rainbow.
 
 	The gamuts of different [=colorspace=]s may be compared
-	by looking at the volume (in cubic LAB units) of colors that can be expressed.
+	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> colorspaces available in CSS.
 
 	<table class=gamuts>