[css-color-4] add gamut volume comparison

Author: svgeesus

css-color-4/Overview.bs

@@ -147,10 +147,43 @@ Value Definitions</h3>
 
 	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>.
+	<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 colorspaces may be compared by looking at the volume (in cubic LAB units) of colors that can be expressed. The following table examines the <a>predefined</a> colorspaces available in CSS.
+
+	<table class=gamuts>
+		<tr>
+			<th>Colorspace</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>
+		<tr>
+			<td>lab</td>
+			<td>6.578</td>
+		</tr>
+	</table>
+
 <h2 id="the-color-property">
 Foreground Color: the 'color' property</h2>
 

css-color-4/style.css

@@ -15,3 +15,7 @@
 	border-radius: 2px;
 	transition: .4s;
 }
+
+table.gamuts tr:hover {
+	background: papayawhip;
+}

css-color-5/style.css

@@ -15,3 +15,7 @@
 	border-radius: 2px;
 	transition: .4s;
 }
+
+table.gamuts tr:hover {
+	background: papayawhip;
+}