[css-color-4] Move definitions to terminology section, fix #6758

Author: svgeesus

css-color-4/Overview.bs

@@ -425,6 +425,43 @@ Value Definitions</h3>
 		</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)
+	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) 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>
+
 <!--
    ███    ████████  ████████  ██       ██    ██ ████ ██    ██  ██████
   ██ ██   ██     ██ ██     ██ ██        ██  ██   ██  ███   ██ ██    ██
@@ -3430,22 +3467,9 @@ Specifying Predefined Colors: the ''color()'' function</h3>
 
 	The color function takes parameters specifying a color, in an explicitly listed color space.
 
-	It represents either an <dfn export>invalid color</dfn>, as described below,
+	It represents either an [=invalid color=], as described below,
 	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).
-	It is said to be <dfn export>out of gamut</dfn>
-	for that color space.
-
-
-	Each [=valid color=] is either in-gamut for the output device (screen, or printer),
-	or it is [=out of gamut=].
-
 	The parameters have the following form:
 
 	* An <<ident>> denoting
@@ -3464,7 +3488,7 @@ Specifying Predefined Colors: the ''color()'' function</h3>
 
 	An out of gamut color has component values
 	less than 0 or 0%, or greater than 1 or 100%.
-	These are not invalid and are retained for intermediate computations;
+	These are not invalid, and are retained for intermediate computations;
 	instead, for display, they are
 	<a>css gamut mapped</a> using a relative colorimetric intent
 	which brings the values