diff --git a/-~-/what the fuck is a lightrunner/-~-/index.html b/-~-/what the fuck is a lightrunner/-~-/index.html
index 2418b06..db8b407 100644
--- a/-~-/what the fuck is a lightrunner/-~-/index.html	
+++ b/-~-/what the fuck is a lightrunner/-~-/index.html	
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<title>base32 color</title>
+<title>base36 color</title>
 <link rel="preconnect" href="https://fonts.bunny.net" />
 <link
   href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i"
@@ -21,6 +21,12 @@
     height: 300px;
     background-color: var(--color);
   }
+
+  #color-box2 {
+    width: 100px;
+    height: 100px;
+    background-color: var(--color);
+  }
 </style>
 
 <noscript>
@@ -36,11 +42,15 @@
     <button id="update">update</button>
   </section>
   <section>
-    <div id="color-box"></div>
+    <div id="color-box">oklab</div>
+    <div id="color-box2">hex</div>
     <ul>
       <li id="rgb">rgb(-1,-1,-1)</li>
+      <li id="rgb3">rgb(-1,-1,-1)</li>
       <li id="hex">#HHHHHH</li>
       <li id="rgb2">high precision rgb(-1,-1,-1)</li>
+      <li id="oklch">oklch(-1 -1 -1)</li>
+      <li id="oklab">oklab(-1 -1 -1)</li>
     </ul>
   </section>
   <section>
@@ -67,35 +77,46 @@
   </section>
 </main>
 
+<script src="https://colorjs.io/dist/color.global.js"></script>
+
 <script>
   const inputEl = document.querySelector("#input");
   const updateEl = document.querySelector("#update");
   const colorBoxEl = document.querySelector("#color-box");
+  const colorBox2El = document.querySelector("#color-box2");
   const hexEl = document.querySelector("#hex");
   const rgbEl = document.querySelector("#rgb");
   const rgb2El = document.querySelector("#rgb2");
+  const rgb3El = document.querySelector("#rgb3");
+  const oklchEl = document.querySelector("#oklch");
+  const oklabEl = document.querySelector("#oklab");
 
   const setColor = (r, g, b) => {
-    colorBoxEl.setAttribute("style", `--color: rgb(${r}, ${g}, ${b})`);
-    hexEl.innerHTML = `#${(
-      Math.round(r).toString(16).padStart(2, "0") +
-      Math.round(g).toString(16).padStart(2, "0") +
-      Math.round(b).toString(16).padStart(2, "0")
-    ).toLowerCase()}`;
+    const color = new Color(`rgb(${r}, ${g}, ${b})`);
+    colorBoxEl.setAttribute(
+      "style",
+      `--color: ${color.to("oklch").toString()}`
+    );
+
+    hexEl.innerHTML = color.toString({ format: "hex" });
+    colorBox2El.setAttribute("style", `--color: ${hexEl.innerHTML}`);
     rgbEl.innerHTML = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(
       b
     )})`;
     rgb2El.innerHTML = `highp rgb(${r}, ${g}, ${b})`;
+    rgb3El.innerHTML = color.toString({ format: "rgb" });
+    oklchEl.innerHTML = color.toString({ format: "oklch" });
+    oklabEl.innerHTML = color.toString({ format: "oklab" });
   };
 
-  const base32to8bit = (b32) => (parseInt(b32, 36) / 46655) * 255;
+  const base36to8bit = (b36) => (parseInt(b36, 36) / 46655) * 255;
 
   const inputToColor = (inputRaw) => {
     const input = inputRaw + "000000000";
     // Input will be 0-9A-Z,
-    const r = base32to8bit(input.substr(0, 3));
-    const g = base32to8bit(input.substr(3, 3));
-    const b = base32to8bit(input.substr(6, 3));
+    const r = base36to8bit(input.substr(0, 3));
+    const g = base36to8bit(input.substr(3, 3));
+    const b = base36to8bit(input.substr(6, 3));
 
     return { r, g, b };
   };
