diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
index ede9f55bd55c..8626f046b909 100644
--- a/lighthouse-treemap/app/src/main.js
+++ b/lighthouse-treemap/app/src/main.js
@@ -620,8 +620,8 @@ class TreemapViewer {
 
       // Shade the element to communicate coverage.
       if (this.currentViewMode.id === 'unused-bytes') {
-        const pctUsed = (1 - (node.unusedBytes || 0) / node.resourceBytes) * 100;
-        node.dom.style.setProperty('--pctUsed', `${pctUsed}%`);
+        const pctUnused = (node.unusedBytes || 0) / node.resourceBytes * 100;
+        node.dom.style.setProperty('--pctUnused', `${pctUnused}%`);
       }
     });
   }
diff --git a/lighthouse-treemap/app/styles/treemap.css b/lighthouse-treemap/app/styles/treemap.css
index 3b7affc9a254..d8fb3bcb94ab 100644
--- a/lighthouse-treemap/app/styles/treemap.css
+++ b/lighthouse-treemap/app/styles/treemap.css
@@ -219,7 +219,7 @@ header {
   right: 0;
   content: '';
   display: block;
-  width: var(--pctUsed);
+  width: var(--pctUnused);
   background: repeating-linear-gradient(
           -45deg,
           hsla(0, 0%, 0%, 0),