[css-color-4] Move the srgb-specific intro text to the srgb section; rewrite intro.

Author: tabatkins

css-color-4/Overview.bs

@@ -95,61 +95,40 @@ For example, to specify lime green:
     to how ''<color>/currentcolor'' value works.
 
 <h2 id='color-type'>
-Representing sRGB Colors: the <<color>> type</h2>
+Representing Colors: the <<color>> type</h2>
 
-	CSS colors in the sRGB color space are represented by a triplet of values--
-	red, green, and blue--
-	identifying a point in the sRGB color space [[!SRGB]].
-	This is an internationally-recognized, device-independent color space,
-	and so is useful for specifying colors that will be displayed on a computer screen,
-	but is also useful for specifying colors on other types of devices, like printers.
-	(See [[COLORIMETRY]].)
-	Additionally, every color is accompanied by an alpha component,
-	indicating how transparent it is,
-	and thus how much of the backdrop one can see behind the color.
-	The components are also sometimes called "channels".
+	CSS has several syntaxes for specifying color values.
+	Some directly specify an sRGB color by its channels,
+	such as the [=hex color notation=] or ''rgb()'' function.
+	Others are more human-friendly to write and understand,
+	such as the ''hsl()'' and ''lch()'' functions,
+	or the long list of [=named colors=].
+
+	Colors are represented as a list of 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 behind the color.
 
-	While all colors share an underlying storage format,
-	<!-- that is unlikely to be the case in future, with half floats etc being added to the OM -->
-	CSS contains several syntaxes for <em>specifying</em> <<color>> values.
-	Some directly specify the sRGB color,
-	such as the ''rgb()'' and ''rgba()'' functions
-	and the hex notation.
-	Others are more human-friendly to write and understand,
-	and are converted to an sRGB color by CSS,
-	such as the ''hsl()'' and ''hsla()'' functions,
-	or the long list of named colors defined by CSS.
-
-	In total, the definition of <<color>> is:
+	Colors in CSS are represented by the <dfn><<color>></dfn> type:
 
 	<pre class='prod'>
-	<dfn>&lt;color></dfn> = <<rgb()>> | <<rgba()>> | <<hsl()>> | <<hsla()>> |
-	          <<hwb()>> | <<gray()>> | <<device-cmyk()>> |
-	          <<hex-color>> | <<named-color>> | currentcolor |
+	&lt;color> = <<hex-color>> | <<named-color>> | currentcolor | transparent
+	          <<rgb()>> | <<rgba()>> | <<hsl()>> | <<hsla()>> | <<hwb()>> |
+	          <<lab()>> | <<lch()>> | <<gray()>> |
+	          <<color()>> | <<device-cmyk()>> |
 	          <<system-color>>
 	</pre>
 
-	Some operations work differently on <dfn export>achromatic</dfn> colors.
-	An <a>achromatic</a> color is a shade of gray:
-	in the sRGB colorspace,
-	a color is <a>achromatic</a> if the red, green, and blue channels are all the same value;
-	in the HSL colorspace,
-	a color is <a>achromatic</a> if the saturation is ''0%'';
-	in the HWB colorspace,
-	a color is <a>achromatic</a> if the sum of the whiteness and blackness is at least ''100%''.
-
 	For easy reference in other specifications,
-	<dfn export>opaque black</dfn> is an sRGB color
-	with the red, green, and blue components all at their minimum value,
-	and the alpha component at its maximum value
-	(the same color as produced by ''rgb(0 0 0 / 100%)'').
-	<dfn export>Transparent black</dfn> is the same color,
-	but with the alpha component at the minimum instead
-	(the same color as produced by ''rgb(0 0 0 / 0%)'').
-
-
+	<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="notes">
 Notes On Using Colors</h3>
@@ -256,7 +235,22 @@ Resolving Color values</h2>
 <h2 id='numeric-rgb'>
 RGB Colors</h2>
 
-	There are several methods of directly specifying an sRGB color in terms of its RGBA channels.
+	CSS colors in the sRGB color space are represented by a triplet of values--
+	red, green, and blue--
+	identifying a point in the sRGB color space [[!SRGB]].
+	This is an internationally-recognized, device-independent color space,
+	and so is useful for specifying colors that will be displayed on a computer screen,
+	but is also useful for specifying colors on other types of devices, like printers.
+	(See [[COLORIMETRY]].)
+
+	CSS provides several methods of directly specifying an sRGB color:
+	[=hex colors=],
+	''rgb()''/''rgba()'' notation,
+	''hsl()''/''hsla()'' notation,
+	''hwb()'' notation,
+	[=named colors=],
+	and the ''transparent'' keyword.
+
 
 <h3 id='rgb-functions'>
 The RGB functions: ''rgb()'' and ''rgba()''</h3>
@@ -311,7 +305,8 @@ The RGB functions: ''rgb()'' and ''rgba()''</h3>
 <h3 id='hex-notation'>
 The RGB hexadecimal notations: ''#RRGGBB''</h3>
 
-	The CSS <dfn export>hex color</dfn> notation allows a color to be specified by giving the channels as hexadecimal numbers,
+	The CSS <dfn lt="hex color | hex color notation" export>hex color notation</dfn>
+	allows a color to be specified by giving the channels as hexadecimal numbers,
 	which is similar to how colors are often written directly in computer code.
 	It's also shorter than writing the same color out in ''rgb()'' notation.