Palette relationships

<!doctype html><html lang="ja"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>body{margin:0;min-height:330px}.sample{width:100%;height:100%;min-height:330px;padding:12px!important;display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:8px!important;background:#f0efeb;color:#232323;font-family:Arial,Meiryo,sans-serif;overflow:hidden;box-sizing:border-box}.sample *{box-sizing:border-box}.lab-scene{width:100%;max-width:430px;height:140px;position:relative;overflow:hidden;border-bottom:1px solid #ccc}.lab-scene:has(canvas){max-width:320px;height:auto;aspect-ratio:16/9;flex-shrink:0}.lab-canvas{display:block;width:100%;height:100%!important;outline-offset:-3px}.lab-canvas:focus-visible{outline:2px solid #222}.lab-controls{width:100%;max-width:390px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}.lab-controls label{display:grid;grid-template-columns:1fr auto;gap:2px;font-size:11px;min-width:0}.lab-controls input{grid-column:1/-1;width:100%;min-width:0;margin:0;accent-color:#333;height:30px}.lab-controls output{font-variant-numeric:tabular-nums}.lab-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}.sample .lab-actions button{color:inherit;font:11px Arial,Meiryo,sans-serif;border:1px solid #aaa;border-radius:99px;background:transparent;min-height:44px;padding:8px 12px;cursor:pointer}.lab-status{font-size:10px;line-height:1.4;min-height:14px;margin:0;text-align:center}.lab-note{font-size:9px;line-height:1.3;color:#666;margin:0;text-align:center}.lab-actions button:focus-visible{outline:2px solid #222;outline-offset:2px}@media(prefers-reduced-motion:reduce){.sample *{animation-play-state:paused!important;transition:none!important}}.lab-scene{height:180px;padding:12px;display:grid;align-content:center;gap:8px}.lab-scene p{margin:0;font-size:12px;line-height:1.7}.lab-scene small{font-size:10px}.lab-scene button{min-height:40px}.swatches{display:grid;grid-template-columns:repeat(4,1fr);height:110px}.swatch{display:grid;place-items:center;color:#fff;font:12px monospace;text-shadow:0 1px 3px #000}</style><div class="sample"><div class="lab-scene"><div class="swatches"><span class="swatch"></span><span class="swatch"></span><span class="swatch"></span><span class="swatch"></span></div></div><div class="lab-controls"><label>基準の色相<output>200</output><input aria-label="基準の色相" type="range" min="0" max="359" step="1" value="200" data-key="hue"></label><label>色相の間隔<output>30</output><input aria-label="色相の間隔" type="range" min="0" max="180" step="1" value="30" data-key="interval"></label></div><div class="lab-actions"><button data-play>停止</button><button data-reset>比較を切り替える</button></div><p class="lab-status" role="status"></p></div><script>const lab=(function runDomLab(root,cfg,setup){
 const abort=new AbortController(),values=Object.fromEntries(cfg.controls.map(c=>[c.key,c.value])),mq=matchMedia('(prefers-reduced-motion:reduce)');let auto=!mq.matches;
 const on=(el,event,fn)=>el.addEventListener(event,fn,{signal:abort.signal});
 const api=setup({root,values,kind:cfg.kind,on,reduced:mq.matches})||{};
 for(const input of root.querySelectorAll('[data-key]'))on(input,'input',()=>{values[input.dataset.key]=Number(input.value);input.closest('label').querySelector('output').textContent=input.value;api.update?.()});
 const play=root.querySelector('[data-play]');on(play,'click',()=>{auto=!auto;api.setAuto?.(auto);for(const a of root.querySelector('.lab-scene').getAnimations({subtree:true}))auto?a.play():a.pause();play.textContent=auto?'停止':'再生';play.setAttribute('aria-pressed',String(!auto))});
 const reset=root.querySelector('[data-reset]');on(reset,'click',()=>api.action?.());
 on(document,'visibilitychange',()=>api.setAuto?.(auto&&!document.hidden));
 api.update?.();if(cfg.static)play.hidden=true;
 return {setAuto(on){auto=on&&!mq.matches;api.setAuto?.(auto);for(const a of root.querySelector('.lab-scene').getAnimations({subtree:true}))auto?a.play():a.pause();play.textContent=auto?'停止':'再生'},destroy(){abort.abort();api.destroy?.()}};
})(document,{"kind":"color-palette","controls":[{"key":"hue","label":"基準の色相","min":0,"max":359,"value":200,"step":1},{"key":"interval","label":"色相の間隔","min":0,"max":180,"value":30,"step":1}],"static":true,"action":"比較を切り替える"},function setup({root,values:v,kind,on}){const stage=root.querySelector('.lab-scene'),status=root.querySelector('.lab-status');let alt=false;return{update(){for(const [key,value]of Object.entries(v))stage.style.setProperty('--'+key,value);if(kind==='type-variable-axes'){root.querySelector('.axis-word').style.fontVariationSettings=`"wdth" ${v.width}, "slnt" ${v.slant}, "opsz" ${v.optical}`;status.textContent='図鑑オリジナルの実フォント · wdth / slnt / opsz'}if(kind==='color-palette'){root.querySelectorAll('.swatch').forEach((el,i)=>{const h=(v.hue+i*v.interval)%360;el.style.background=`hsl(${h} 40% ${i%2?65:38}%)`;el.textContent=Math.round(h)+'°'})}if(kind==='color-contrast'){const lum=x=>{x/=255;return x<=.04045?x/12.92:Math.pow((x+.055)/1.055,2.4)},a=lum(v.foreground),b=lum(v.background),ratio=(Math.max(a,b)+.05)/(Math.min(a,b)+.05);stage.style.background=`rgb(${v.background},${v.background},${v.background})`;stage.style.color=`rgb(${v.foreground},${v.foreground},${v.foreground})`;status.textContent=`コントラスト比 ${ratio.toFixed(2)}:1 · 通常文字のAA目安 ${ratio>=4.5?'達成':'未達'}`}if(kind==='type-line-break'||kind==='type-kinsoku')root.querySelector('.text-frame').style.width=v.width+'%';if(kind==='svg-icon-morph'){const p=v.progress/100,lines=root.querySelectorAll('line');lines[0].setAttribute('x1',35+10*p);lines[0].setAttribute('y1',35+10*p);lines[0].setAttribute('x2',85-10*p);lines[0].setAttribute('y2',35+40*p);lines[1].setAttribute('opacity',1-p);lines[2].setAttribute('x1',35+10*p);lines[2].setAttribute('y1',85-10*p);lines[2].setAttribute('x2',85-10*p);lines[2].setAttribute('y2',85-40*p);}},action(){alt=!alt;stage.classList.toggle('alternate',alt);status.textContent=alt?'比較する状態':'元の状態'}}});addEventListener('pagehide',()=>lab.destroy(),{once:true});</script></html>