3 files changed, 8 insertions, 4 deletions
diff --git a/scripts/theme-studio/app.js b/scripts/theme-studio/app.js
index dc5b44bd..ff6d7c47 100644
--- a/scripts/theme-studio/app.js
+++ b/scripts/theme-studio/app.js
@@ -309,7 +309,7 @@ function renderRamp(){
   rampNote(r.adjusted.length?('adjusted: '+r.adjusted.join(', ')):'',false);
   r.steps.forEach(s=>{const nm=rampStepName(s.offset);const c=document.createElement('div');c.className='rchip';c.style.background=s.hex;c.style.color=textOn(s.hex);
     c.title=nm+' '+s.hex+(s.clamped?' (gamut-clamped)':'');
-    c.innerHTML=`<span>${esc(nm)}</span>${s.clamped?'<span class="rclamp" title="clamped to sRGB">!</span>':''}`;
+    c.innerHTML=`<span>${esc(nm)}</span><span class="rhex">${s.hex}</span>${s.clamped?'<span class="rclamp" title="clamped to sRGB">!</span>':''}`;
     c.onclick=()=>addRampStep(s);prev.appendChild(c);});
 }
 // Insert a step adjacent to the source swatch, keeping the ramp siblings in
@@ -1012,6 +1012,7 @@ if(location.hash==='#ramptest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c
  selectedIdx=PALETTE.findIndex(p=>p[1]==='blue');document.getElementById('newhexstr').value='#67809c';document.getElementById('newname').value='blue';
  openRamp();document.getElementById('rampn').value='2';document.getElementById('rampstepl').value='0.08';document.getElementById('rampce').value='0.5';renderRamp();
  A(document.querySelectorAll('#rampprev .rchip').length===4,'expected 4 step chips, got '+document.querySelectorAll('#rampprev .rchip').length);
+ A(document.querySelectorAll('#rampprev .rchip .rhex').length===4,'each step tile shows its hex');
  addAllRampSteps();
  const names=PALETTE.map(p=>p[1]),bi=names.indexOf('blue');
  A(names.slice(bi,bi+5).join(',')==='blue,blue-2,blue-1,blue+1,blue+2','order after blue: '+names.slice(bi,bi+5).join(','));
diff --git a/scripts/theme-studio/styles.css b/scripts/theme-studio/styles.css
index a4aa7c04..b874ee72 100644
--- a/scripts/theme-studio/styles.css
+++ b/scripts/theme-studio/styles.css
@@ -66,7 +66,8 @@
  .ramprow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font:10pt monospace;color:#b4b1a2}
  .ramprow input[type=number]{background:#0d0b0a;border:1px solid #252321;color:#cdced1;border-radius:4px;padding:4px 6px;font:10pt monospace}
  .rampprev{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
- .rchip{width:74px;height:48px;border-radius:5px;border:1px solid #555;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;font:bold 9pt monospace}
+ .rchip{width:74px;height:48px;border-radius:5px;border:1px solid #555;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font:bold 9pt monospace;line-height:1.3}
+ .rchip .rhex{font-weight:normal;font-size:8pt;opacity:.85}
  .rchip .rclamp{position:absolute;top:2px;right:4px;color:#cb6b4d;font-weight:bold;font-size:12px}
  #rampmsg{font:10pt monospace;margin-top:6px;min-height:14px;color:#8a9496}
  .svsafe{position:absolute;left:0;width:100%;background:rgba(203,107,77,0.30);border-bottom:2px solid #cb6b4d;pointer-events:none;z-index:2}
diff --git a/scripts/theme-studio/theme-studio.html b/scripts/theme-studio/theme-studio.html
index 6fdb52f2..bc96441d 100644
--- a/scripts/theme-studio/theme-studio.html
+++ b/scripts/theme-studio/theme-studio.html
@@ -68,7 +68,8 @@
  .ramprow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font:10pt monospace;color:#b4b1a2}
  .ramprow input[type=number]{background:#0d0b0a;border:1px solid #252321;color:#cdced1;border-radius:4px;padding:4px 6px;font:10pt monospace}
  .rampprev{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
- .rchip{width:74px;height:48px;border-radius:5px;border:1px solid #555;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;font:bold 9pt monospace}
+ .rchip{width:74px;height:48px;border-radius:5px;border:1px solid #555;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font:bold 9pt monospace;line-height:1.3}
+ .rchip .rhex{font-weight:normal;font-size:8pt;opacity:.85}
  .rchip .rclamp{position:absolute;top:2px;right:4px;color:#cb6b4d;font-weight:bold;font-size:12px}
  #rampmsg{font:10pt monospace;margin-top:6px;min-height:14px;color:#8a9496}
  .svsafe{position:absolute;left:0;width:100%;background:rgba(203,107,77,0.30);border-bottom:2px solid #cb6b4d;pointer-events:none;z-index:2}
@@ -832,7 +833,7 @@ function renderRamp(){
   rampNote(r.adjusted.length?('adjusted: '+r.adjusted.join(', ')):'',false);
   r.steps.forEach(s=>{const nm=rampStepName(s.offset);const c=document.createElement('div');c.className='rchip';c.style.background=s.hex;c.style.color=textOn(s.hex);
     c.title=nm+' '+s.hex+(s.clamped?' (gamut-clamped)':'');
-    c.innerHTML=`<span>${esc(nm)}</span>${s.clamped?'<span class="rclamp" title="clamped to sRGB">!</span>':''}`;
+    c.innerHTML=`<span>${esc(nm)}</span><span class="rhex">${s.hex}</span>${s.clamped?'<span class="rclamp" title="clamped to sRGB">!</span>':''}`;
     c.onclick=()=>addRampStep(s);prev.appendChild(c);});
 }
 // Insert a step adjacent to the source swatch, keeping the ramp siblings in
@@ -1535,6 +1536,7 @@ if(location.hash==='#ramptest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c
  selectedIdx=PALETTE.findIndex(p=>p[1]==='blue');document.getElementById('newhexstr').value='#67809c';document.getElementById('newname').value='blue';
  openRamp();document.getElementById('rampn').value='2';document.getElementById('rampstepl').value='0.08';document.getElementById('rampce').value='0.5';renderRamp();
  A(document.querySelectorAll('#rampprev .rchip').length===4,'expected 4 step chips, got '+document.querySelectorAll('#rampprev .rchip').length);
+ A(document.querySelectorAll('#rampprev .rchip .rhex').length===4,'each step tile shows its hex');
  addAllRampSteps();
  const names=PALETTE.map(p=>p[1]),bi=names.indexOf('blue');
  A(names.slice(bi,bi+5).join(',')==='blue,blue-2,blue-1,blue+1,blue+2','order after blue: '+names.slice(bi,bi+5).join(','));