<div class="cw"><button class="pl" type="button"><i class="sw"></i><span class="hx">#3478F6</span></button><div class="pp"><div class="ar"><div class="kn"></div></div><div class="hu"><div class="hk"></div></div><input class="hi" value="#3478F6" maxlength="7"><div class="ps"></div></div></div>
<style>
.cw{position:relative;width:100%;height:100%;min-height:380px;display:flex;flex-direction:column;align-items:center;padding-top:60px;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.pl{display:flex;align-items:center;gap:8px;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:99px;padding:6px 12px 6px 6px;color:#eee;font:500 12px system-ui;cursor:pointer}.sw{width:20px;height:20px;border-radius:6px;background:#3478f6}.pp{margin-top:10px;width:220px;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:16px;padding:12px;box-sizing:border-box;opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;transition:opacity .2s,transform .35s cubic-bezier(.3,1.4,.5,1)}.pp.on{opacity:1;transform:none;pointer-events:auto}.ar{position:relative;height:130px;border-radius:10px;cursor:crosshair;touch-action:none;background:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsl(var(--h,220),100%,50%))}.kn{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none}.hu{position:relative;height:12px;margin:12px 0;border-radius:99px;cursor:pointer;touch-action:none;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.hk{position:absolute;top:-2px;width:16px;height:16px;margin-left:-8px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none}.hi{width:100%;box-sizing:border-box;background:#111;border:1px solid #2a2a2a;border-radius:8px;padding:7px 9px;color:#eee;font:12px ui-monospace,monospace;text-transform:uppercase}.ps{display:flex;gap:6px;margin-top:10px}.ps i{width:22px;height:22px;border-radius:7px;cursor:pointer;transition:transform .2s}.ps i:hover{transform:scale(1.15)}
</style>
<script>
(function(){var R=document.querySelector(".cw"),pl=R.querySelector(".pl"),pp=R.querySelector(".pp"),ar=R.querySelector(".ar"),kn=R.querySelector(".kn"),hu=R.querySelector(".hu"),hk=R.querySelector(".hk"),hi=R.querySelector(".hi"),sw=R.querySelector(".sw"),hx=R.querySelector(".hx"),ps=R.querySelector(".ps");var h=220,s=.75,v=.96;function rgb(h,s,v){var f=function(n){var k=(n+h/60)%6;return v-v*s*Math.max(0,Math.min(k,4-k,1))};return[f(5),f(3),f(1)].map(function(x){return Math.round(x*255)})}function hex(c){return"#"+c.map(function(x){return("0"+x.toString(16)).slice(-2)}).join("").toUpperCase()}function hsv(c){var r=c[0]/255,g=c[1]/255,b=c[2]/255,mx=Math.max(r,g,b),mn=Math.min(r,g,b),d=mx-mn,H=0;if(d){if(mx===r)H=((g-b)/d+6)%6;else if(mx===g)H=(b-r)/d+2;else H=(r-g)/d+4;H*=60}return[H,mx?d/mx:0,mx]}function paint(skip){var x=hex(rgb(h,s,v));R.style.setProperty("--h",h);ar.style.setProperty("--h",h);kn.style.left=s*100+"%";kn.style.top=(1-v)*100+"%";hk.style.left=h/360*100+"%";sw.style.background=x;hx.textContent=x;if(!skip)hi.value=x}function ptr(el,fn){el.onpointerdown=function(e){el.setPointerCapture(e.pointerId);fn(e);el.onpointermove=fn;el.onpointerup=function(){el.onpointermove=null}}}ptr(ar,function(e){var r=ar.getBoundingClientRect();s=Math.max(0,Math.min(1,(e.clientX-r.left)/r.width));v=1-Math.max(0,Math.min(1,(e.clientY-r.top)/r.height));paint()});ptr(hu,function(e){var r=hu.getBoundingClientRect();h=Math.max(0,Math.min(359,(e.clientX-r.left)/r.width*360));paint()});hi.oninput=function(){var m=/^#?([0-9a-f]{6})$/i.exec(hi.value.trim());if(m){var n=parseInt(m[1],16),a=hsv([n>>16,(n>>8)&255,n&255]);h=a[0];s=a[1];v=a[2];paint(true)}};["#3478F6","#F5A524","#2F855A","#B83280","#E5484D","#8E8E93"].forEach(function(c){var i=document.createElement("i");i.style.background=c;i.onclick=function(){hi.value=c;hi.oninput()};ps.appendChild(i)});pl.onclick=function(){pp.classList.toggle("on")};paint();pp.classList.add("on")})();
</script>