From 914dbfb74361d7afb7e83aeab07e70ba61ea68d7 Mon Sep 17 00:00:00 2001
From: Chris Lilley <chris@w3.org>
Date: Mon, 5 Sep 2022 14:53:48 +0300
Subject: [PATCH] [css-color-5] Label colors, #7691

---
 css-color-5/images/CH-mixing.svg | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/css-color-5/images/CH-mixing.svg b/css-color-5/images/CH-mixing.svg
index d4891e707a9..3b2214f0779 100644
--- a/css-color-5/images/CH-mixing.svg
+++ b/css-color-5/images/CH-mixing.svg
@@ -7,6 +7,24 @@
       40% mix is lch(79.7256% 40.4534 84.7634) rgb(87.41% 76.03% 47.64%) lab(79.7256, 3.69213016556943, 40.28455965255785)
 
 </desc>
+<style type="text/css">
+    @font-face {
+        font-family: OS_Cond_Med;
+        src: url(./fonts/OS_Cond_Med.woff2);
+    }
+    text {
+        font-family: OS_Cond_Med;
+        font-size:6px;
+        text-anchor:start;
+        fill: #555
+        }
+    text.end {
+      text-anchor:end;
+    }
+    text.smol {
+      font-size: 4.5px;
+    }
+</style>
 <g fill="none" stroke="black" stroke-width="0.5">
 
 <!-- mix curve
@@ -61,11 +79,13 @@
 <circle r="4"/>
 <circle r="3" fill="#777"/>
 <circle r="2" fill="#fff"/>
-<g font-family="sans-serif" font-size="6pt">
-<!-- haha not really 6pt but a unit is required per CSS -->
+<g>
   <text x="50" y="-2">+a</text>
-  <text x="-50" y="-2" text-anchor="end">-a</text>
+  <text x="-50" y="-2" class="end">-a</text>
   <text x="4" y="52">-b</text>
   <text x="4" y="-48">+b</text>
+  <text x="28" y="-46.8" class="smol">peru</text>
+  <text x="-10" y="-29" class="smol end">lightGoldenRod</text>
+  <text x="-5" y="-40"  class="smol end">mix</text>
 </g>
 </svg>
\ No newline at end of file