[css-color-hdr] add swatches

Author: svgeesus

css-color-hdr/Overview.bs

@@ -58,6 +58,7 @@ Abstract: This module explores additions to CSS Color 4 to enable High Dynamic R
 		}
 	}
 </pre>
+<link rel="stylesheet" href="style.css" />
 
 Introduction {#intro}
 =====================
@@ -149,7 +150,7 @@ Predefined colorspaces for HDR: {#predefined-HDR}
 		Content is typically mastered with a lower peak white,
 		such as 4,000  cd/m².
 		<pre>
-		color(rec2100-pq 1.0 1.0 1.0);
+		<span class="swatch oog" style="--color: white"></span> color(rec2100-pq 1.0 1.0 1.0);
 		</pre>
 	</div>
 
@@ -161,13 +162,13 @@ Predefined colorspaces for HDR: {#predefined-HDR}
 		on any sized area of the screen.
 		Diffuse white is 140 cd/m².
 		<pre>
-		color(rec2100-pq 0.54 0.54 0.54);
+		<span class="swatch" style="--color: white"></span> color(rec2100-pq 0.54 0.54 0.54);
 		</pre>
 		This color represents a mid grey,
 		like a photographer's "18% reflectance grey" card,
 		at 17 cd/m².
 		<pre>
-			color(rec2100-pq 0.34 0.34 0.34);
+		<span class="swatch" style="--color: rgb(46.632% 46.632% 46.632%)"></span> color(rec2100-pq 0.34 0.34 0.34);
 		</pre>
 	</div>
 
@@ -253,12 +254,12 @@ Predefined colorspaces for HDR: {#predefined-HDR}
 		of 1,000 to 4,000  cd/m²,
 		so diffuse white will be 203 to 581 cd/m².
 		<pre>
-		color(rec2100-hlg 0.75 0.75 0.75);
+		<span class="swatch" style="--color: white"></span> color(rec2100-hlg 0.75 0.75 0.75);
 		</pre>
 		This color represents a mid grey,
 		at 26 to 104  cd/m².
 		<pre>
-			color(rec2100-hlg 0.38 0.38 0.38);
+		<span class="swatch" style="--color: rgb(46.632% 46.632% 46.632%)"></span> color(rec2100-hlg 0.38 0.38 0.38);
 		</pre>
 	</div>
 

css-color-hdr/style.css

@@ -0,0 +1,34 @@
+.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)
+}
+
+.oog {
+	border: 3px dashed;
+	color:  #c00;
+	padding: 0;
+	width: 1.2em;
+	height: 1.2em;
+	background-color: #ccc;
+}
+
+.oog::before {
+	content: "Out of gamut";
+	display: inline-block;
+	text-transform: uppercase;
+	text-align: center;
+	font: bold .3em/1.2 sans-serif;
+}
+
+.swatch:hover {
+	transform: scale(3);
+	border-radius: 2px;
+	transition: .4s;
+}