← back to Dw Marketing Reels
colorwheel: add 6-dot palette below wheel, paginated left/right through 24 curated colors
5f28b854feb1c2a572553add9ba85bfe60f80c2e · 2026-07-16 10:43:01 -0700 · Steve
Files touched
Diff
commit 5f28b854feb1c2a572553add9ba85bfe60f80c2e
Author: Steve <steve@designerwallcoverings.com>
Date: Thu Jul 16 10:43:01 2026 -0700
colorwheel: add 6-dot palette below wheel, paginated left/right through 24 curated colors
---
colorwheel/index.html | 73 +++++++++++++++++++++++++++++++++++++++------------
1 file changed, 56 insertions(+), 17 deletions(-)
diff --git a/colorwheel/index.html b/colorwheel/index.html
index b2123a6..4ce8286 100644
--- a/colorwheel/index.html
+++ b/colorwheel/index.html
@@ -34,10 +34,20 @@
.side{max-width:300px}
.side h2{font-weight:400;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}
.side p{color:#7a7266;font-size:13px;line-height:1.6;margin:0 0 14px}
- .chips{display:flex;flex-wrap:wrap;gap:8px}
- .chip{width:30px;height:30px;border-radius:8px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
- transition:transform .15s}
- .chip:hover{transform:translateY(-3px) scale(1.08)}
+ /* 6 color dots below the wheel, paged left/right */
+ .wheelcol{display:flex;flex-direction:column;align-items:center;gap:16px}
+ .palette{display:flex;align-items:center;justify-content:center;gap:14px}
+ .pnav{border:1px solid var(--line);background:#fff;color:var(--ink);width:32px;height:32px;
+ border-radius:50%;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;
+ justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.08);transition:transform .12s,box-shadow .12s}
+ .pnav:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(0,0,0,.16)}
+ .pnav:disabled{opacity:.28;cursor:default;transform:none;box-shadow:none}
+ .dots{display:flex;gap:14px}
+ .pdot{width:34px;height:34px;border-radius:50%;cursor:pointer;
+ box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 1px 4px rgba(0,0,0,.12);
+ transition:transform .14s,box-shadow .14s}
+ .pdot:hover{transform:translateY(-3px) scale(1.1)}
+ .pdot.on{box-shadow:0 0 0 3px var(--gold),inset 0 0 0 1px rgba(0,0,0,.14)}
.grid{max-width:1180px;margin:16px auto 60px;padding:0 18px;
display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.card{position:relative;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
@@ -64,13 +74,21 @@
</header>
<div class="stage">
- <div class="wheelwrap" id="ww">
- <div class="spin" id="spin">
- <canvas id="wheel" width="680" height="680"></canvas>
- <div id="pick"></div>
+ <div class="wheelcol">
+ <div class="wheelwrap" id="ww">
+ <div class="spin" id="spin">
+ <canvas id="wheel" width="680" height="680"></canvas>
+ <div id="pick"></div>
+ </div>
+ <div class="hub">
+ <div class="sw" id="sw"></div>
+ </div>
</div>
- <div class="hub">
- <div class="sw" id="sw"></div>
+ <!-- 6 curated color dots, paginated left/right through the full palette -->
+ <div class="palette">
+ <button class="pnav" id="pprev" aria-label="Previous colors">‹</button>
+ <div class="dots" id="dots"></div>
+ <button class="pnav" id="pnext" aria-label="More colors">›</button>
</div>
</div>
<div class="side">
@@ -78,7 +96,6 @@
<p>Every color on the wheel maps to the actual dominant colors extracted from our
full catalog. Pick a shade and we surface the closest perceptual matches — the
same color intelligence behind each product page.</p>
- <div class="chips" id="chips"></div>
</div>
</div>
@@ -140,12 +157,34 @@ ww.addEventListener('pointerdown',e=>{ww.classList.add('dragging');const hx=from
window.removeEventListener('pointermove',mv);window.removeEventListener('pointerup',up);};
window.addEventListener('pointermove',mv);window.addEventListener('pointerup',up);});
-// quick-pick chips (curated hues)
-const CHIPS=[[0,.6],[25,.6],[45,.55],[90,.45],[140,.45],[175,.5],[205,.55],[230,.5],[275,.45],[320,.5],[0,0.03],[0,0.0]];
-const chips=document.getElementById('chips');
-CHIPS.forEach(([h,s])=>{const c=document.createElement('div');c.className='chip';
- const[r,g,bl]=hsl2rgb(h, s, s<0.06?0.85:0.5);c.style.background=rgbHex(r,g,bl);
- c.onclick=()=>{curHue=h;curSat=Math.max(.12,s);const hx=place(h,s);load(hx);};chips.appendChild(c);});
+// curated palette — every entry is [hue,sat] rendered at the wheel's own lightness
+// (0.5) so a dot's color exactly equals the wheel/swatch color it selects. Shown
+// 6 at a time; the ‹ › arrows page through the whole set.
+const PALETTE=[
+ [0,.62],[22,.62],[42,.6],[60,.58],[85,.55],[110,.55],
+ [140,.55],[165,.55],[190,.58],[210,.6],[232,.6],[255,.58],
+ [280,.56],[300,.56],[322,.58],[345,.6],[10,.34],[200,.34],
+ [320,.3],[45,.14],[150,.14],[220,.14],[0,.06],[0,0]
+];
+const PAGE=6, dotsEl=document.getElementById('dots'),
+ prevB=document.getElementById('pprev'), nextB=document.getElementById('pnext');
+let pStart=0, activeDot=-1;
+function renderDots(){
+ dotsEl.innerHTML='';
+ PALETTE.slice(pStart,pStart+PAGE).forEach(([h,s],k)=>{
+ const idx=pStart+k, el=document.createElement('div'); el.className='pdot';
+ const [r,g,b]=hsl2rgb(h,s,0.5), hx=rgbHex(r,g,b);
+ el.style.background=hx; el.title=hx.toUpperCase();
+ if(idx===activeDot) el.classList.add('on');
+ el.onclick=()=>{activeDot=idx;curHue=h;curSat=Math.max(.12,s);place(h,s);load(hx);renderDots();};
+ dotsEl.appendChild(el);
+ });
+ prevB.disabled = pStart<=0;
+ nextB.disabled = pStart+PAGE>=PALETTE.length;
+}
+prevB.onclick=()=>{pStart=Math.max(0,pStart-PAGE);renderDots();};
+nextB.onclick=()=>{pStart=Math.min(Math.max(0,PALETTE.length-PAGE),pStart+PAGE);renderDots();};
+renderDots();
async function load(hex){
grid.innerHTML='<div class="loading">Finding wallcoverings in this color</div>';
← 8098337 colorwheel: widen to 15% ΔE band (big data set), fix spin/cl
·
back to Dw Marketing Reels
·
colorwheel: Shopify /pages/colors widget (scoped inline buil 1dfe5d5 →