color fixes

.gitignore

@@ -1,2 +1,7 @@
 # macos
-.DS_Store
+.DS_Store
+testing.ipynb
+__pycache__/
+# other essentials
+.env/
+.vscode/

static/app.js

@@ -751,7 +751,7 @@ function renderRegistry() {
 // raw (3 bytes RGB) / bpp.
 const bppToRate = (bpp) => 24 / bpp;
 
-const CODEC_COLOR = { jpeg: "#7d8cff", avif: "#34d39a", webp: "#ffb454"};
+const CODEC_COLOR = { jpeg: "#7d8cff", avif: "#34d39a", webp: "#54c0ff"};
 const PBC_COLOR = "#ff3b41";
 
 function card(d) {
@@ -781,7 +781,7 @@ function card(d) {
           <span class="k">Compare to:</span>
           ${haveJ ? "" : `<button class="chip" data-act="cmp-jpeg" style="color:#7d8cff;border-color:#7d8cff">JPEG</button>`}
           ${haveA ? "" : `<button class="chip" data-act="cmp-avif" style="color:#34d39a;border-color:#34d39a">AVIF</button>`}
-          ${haveW ? "" : `<button class="chip" data-act="cmp-webp" style="color:#ffb454;border-color:#ffb454">WebP</button>`}
+          ${haveW ? "" : `<button class="chip" data-act="cmp-webp" style="color:#54c0ff;border-color:#54c0ff">WebP</button>`}
         </div>`
     : "";
   const haveAnim = !!d.animation_url;

static/index.html

@@ -13,7 +13,7 @@
   /* JPEG/AVIF hold buttons reuse the codec colors from the Sweep Analyzer. */
   #hold-jpeg { --hc:#7d8cff; }
   #hold-avif { --hc:#34d39a; }
-  #hold-webp { --hc:#ffb454; }
+  #hold-webp { --hc:#54c0ff; }
   #hold-jpeg, #hold-avif, #hold-webp { border-color: var(--hc); color: var(--hc); }
   #hold-jpeg.holding, #hold-avif.holding, #hold-webp.holding { background: var(--hc); border-color: var(--hc); color: #fff; }
 </style>

static/sweep.css

@@ -61,8 +61,8 @@ table.sw-table tbody tr:hover{background:var(--surface2);}
 table.sw-table tbody tr.sel{background:var(--red-soft);}
 table.sw-table tbody tr.sel td{color:#fff;}
 .sw-tag{display:inline-block;padding:1px 6px;border-radius:5px;font-size:9px;letter-spacing:.06em;text-transform:uppercase;}
-.sw-tag.par{background:rgba(255,140,0,.15);color:#ff9b2e;}
-.sw-tag.base{background:rgba(0,200,255,.13);color:#34c6ff;}
+.sw-tag.par{background:rgba(255,140,0,.15);color:#ffce2e;}
+.sw-tag.base{background:rgba(0,200,255,.13);color:#ff280c;}
 
 .sw-sel-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;}
 @media (max-width:900px){.sw-sel-grid{grid-template-columns:1fr;}}

static/sweep.js

@@ -24,8 +24,8 @@
   };
 
   const COLORS = {
-    gray: "#56565d", pareto: "#ff9b2e", sel: "#ff3b41", base: "#34c6ff",
-    jpeg: "#7d8cff", avif: "#34d39a", webp: "#ffb454",
+    gray: "#5c3839", pareto: "#ff3b41", sel: "#ffce2e", base: "#ff280c",
+    jpeg: "#7d8cff", avif: "#34d39a", webp: "#54c0ff",
   };
   const TOGGLES = [["pbcAll", "PBC All"], ["pbcPareto", "PBC Pareto"], ["presets", "PBC Presets"], ["jpeg", "JPEG"], ["avif", "AVIF"], ["webp", "WebP"]];