Mieszalnik dwóch kolorów

<main class="mixer"><header><h1>Mieszalnik<br>kolorów</h1><p>Ustaw proporcję kolorów.</p></header><div class="color-controls"><div><label for="color-a">Kolor A</label><input id="color-a" type="color" value="#3449a8"><code id="hex-a">#3449A8</code></div><button id="swap" type="button" aria-label="Zamień kolory A i B">Zamień</button><div><label for="color-b">Kolor B</label><input id="color-b" type="color" value="#f0bf45"><code id="hex-b">#F0BF45</code></div></div><label for="ratio">Udział koloru B: <span id="ratio-label">50%</span></label><input id="ratio" type="range" min="0" max="100" value="50"><div id="palette" class="palette" aria-label="Paleta interpolowanych kolorów"></div><div id="mix" class="mix"><span>Wynik mieszania</span><output id="mix-code">#928479</output></div><p id="status" class="status" role="status"></p></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;font:16px/1.45 system-ui,sans-serif;display:grid;align-content:center;color:#17212e;background:#f5f7fb}main{width:min(100%,850px);margin:auto}h1,h2,p{margin:0 0 16px}h1{font-size:clamp(26px,4vw,42px);line-height:1.1}h2{font-size:21px}label{display:block;font-weight:600;margin-bottom:6px}input,select,textarea,button{font:inherit;max-width:100%}input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:100%;padding:10px 12px;background:#fff;color:#17212e;border:1px solid #748091;min-height:44px;border-radius:0}textarea{resize:vertical}button{min-height:44px;padding:10px 18px;border:1px solid currentColor;background:#17212e;color:white;cursor:pointer;border-radius:0}button:hover{filter:brightness(1.15)}button:disabled{cursor:default;opacity:.55}button.secondary{background:transparent;color:inherit}input[type=radio],input[type=checkbox]{width:20px;height:20px;vertical-align:middle;accent-color:var(--accent,#3155c7)}input[type=range]{width:100%;accent-color:var(--accent,#3155c7);min-height:32px}input[type=color]{width:100%;min-height:52px;cursor:pointer;background:transparent;border:1px solid currentColor}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;margin-bottom:12px}output{display:block}small,.note{font-size:13px}p.note{margin:10px 0 0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent,#3155c7);outline-offset:3px}[hidden]{display:none!important}.field{margin-bottom:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status{min-height:24px;margin-top:14px;font-weight:600;overflow-wrap:anywhere}.muted{color:#4b5868}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:560px){body{padding:18px}.two{grid-template-columns:1fr}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#f4f0ff;color:#30295b;--accent:#6a4699}.mixer{max-width:800px}.mixer header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.mixer h1{font-family:Georgia,serif;font-weight:400}.color-controls{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin:20px 0}.color-controls code{display:block;font-size:13px;margin-top:5px}.mixer button{background:#6a4699}.palette{display:grid;grid-template-columns:repeat(5,1fr);margin:20px 0}.palette span{height:55px;display:grid;align-items:end;padding:8px;font-size:12px;font-family:ui-monospace,monospace}.mix{padding:20px;display:flex;justify-content:space-between;align-items:center;gap:10px}.mix output{font:28px ui-monospace,monospace}@media(max-width:560px){.mixer header{display:block}.color-controls{gap:10px}.color-controls button{padding:10px 12px}.palette{grid-template-columns:repeat(2,1fr)}.palette span{height:42px;font-size:12px;padding:8px}.palette span:last-child{grid-column:1/-1}.mix{flex-wrap:wrap}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];const rgb=s=>[1,3,5].map(i=>parseInt(s.slice(i,i+2),16));const hex=a=>'#'+a.map(n=>Math.round(n).toString(16).padStart(2,'0')).join('').toUpperCase();const shade=(a,b,t)=>a.map((n,i)=>n+(b[i]-n)*t);const ink=a=>{const linear=a.map(n=>{n/=255;return n<=.04045?n/12.92:((n+.055)/1.055)**2.4});return linear[0]*.2126+linear[1]*.7152+linear[2]*.0722>.179?'#000':'#fff'};const update=()=>{const a=rgb(q('#color-a').value),b=rgb(q('#color-b').value),t=Number(q('#ratio').value)/100,mix=shade(a,b,t),code=hex(mix);q('#hex-a').textContent=hex(a);q('#hex-b').textContent=hex(b);q('#ratio-label').textContent=Math.round(t*100)+'%';q('#mix').style.backgroundColor=code;q('#mix').style.color=ink(mix);q('#mix-code').textContent=code;q('#palette').replaceChildren();for(let i=0;i<5;i++){const v=shade(a,b,i/4),s=document.createElement('span');s.textContent=hex(v);s.style.backgroundColor=hex(v);s.style.color=ink(v);q('#palette').append(s)}};all('#color-a,#color-b,#ratio').forEach(e=>e.oninput=update);q('#swap').onclick=()=>{const a=q('#color-a').value;q('#color-a').value=q('#color-b').value;q('#color-b').value=a;update();q('#status').textContent='Zamieniono kolory A i B.'};update();})();