add colorspace example, with swatches

Author: svgeesus

css-color-4/Overview.bs

@@ -21,6 +21,7 @@ spec:css-color-4; type:descriptor; for:@color-profile; text:src
 spec:css-color-4; type:dfn; text:colorspace
 spec:css-color-4; type:dfn; text:gamut
 </pre>
+<link rel="stylesheet" href="style.css" />
 
 <style>
 table.named-color-table thead th { text-align:center; background:black; color:white; }
@@ -103,7 +104,7 @@ Value Definitions</h3>
 		the green in the leaf, and the photo, and the print will look the same.
 	</div>
 
-	A <dfn>colorspace</dfn> is an organization of colors
+	A <dfn export>colorspace</dfn> is an organization of colors
 	with respect to an underlying
 	<abbr title="colorimetry is the measurement of human color perception">colorimetric</abbr>
 	model,
@@ -113,7 +114,24 @@ Value Definitions</h3>
 	or transformed from one colorspace to another,
 	while looking the same.
 
-	<div class="example"></div>
+	<div class="example"><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 colorspaces:</p>
+
+		<pre>
+<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>
 
 	When the measured physical characteristics
 	(such as the chromaticities of the primary colors it uses,

css-color-4/style.css

@@ -0,0 +1,17 @@
+.swatch {
+	position: relative;
+	z-index: 1;
+	display: inline-block;
+	vertical-align: calc(-.1em - 3px);
+	padding: .6em;
+	background-color: var(--color);
+	border: 3px solid white;
+	border-radius: 3px;
+	box-shadow: 1px 1px 1px rgba(0,0,0,.15)
+}
+
+.swatch:hover {
+	transform: scale(3);
+	border-radius: 2px;
+	transition: .4s;
+}