oops that needs to be a different thing

-~-/what the fuck is a lightrunner/-~-/index.html

@@ -22,7 +22,8 @@
     background-color: var(--color);
   }
 
-  #color-box2 {
+  #color-box2,
+  #color-box3 {
     width: 100px;
     height: 100px;
     background-color: var(--color);
@@ -42,8 +43,9 @@
     <button id="update">update</button>
   </section>
   <section>
-    <div id="color-box">oklab</div>
+    <div id="color-box">highp rgb</div>
     <div id="color-box2">hex</div>
+    <div id="color-box3">oklab</div>
     <ul>
       <li id="rgb">rgb(-1,-1,-1)</li>
       <li id="rgb3">rgb(-1,-1,-1)</li>
@@ -84,6 +86,7 @@
   const updateEl = document.querySelector("#update");
   const colorBoxEl = document.querySelector("#color-box");
   const colorBox2El = document.querySelector("#color-box2");
+  const colorBox3El = document.querySelector("#color-box3");
   const hexEl = document.querySelector("#hex");
   const rgbEl = document.querySelector("#rgb");
   const rgb2El = document.querySelector("#rgb2");
@@ -93,10 +96,7 @@
 
   const setColor = (r, g, b) => {
     const color = new Color(`rgb(${r}, ${g}, ${b})`);
-    colorBoxEl.setAttribute(
-      "style",
-      `--color: ${color.to("oklch").toString()}`
-    );
+    colorBoxEl.setAttribute("style", `--color: rgb(${r}, ${g}, ${b})`);
 
     hexEl.innerHTML = color.toString({ format: "hex" });
     colorBox2El.setAttribute("style", `--color: ${hexEl.innerHTML}`);
@@ -107,6 +107,7 @@
     rgb3El.innerHTML = color.toString({ format: "rgb" });
     oklchEl.innerHTML = color.toString({ format: "oklch" });
     oklabEl.innerHTML = color.toString({ format: "oklab" });
+    colorBox3El.setAttribute("style", `--color: ${oklabEl.innerHTML}`);
   };
 
   const base36to8bit = (b36) => (parseInt(b36, 36) / 46655) * 255;