Color Picker with HEX/RGB

<div class="cpk"><input type="color" id="picker" value="#ff477e"><div class="cpk-info"><div class="cpk-sw" id="sw"></div><div><span id="hex">#ff477e</span><small id="rgb">rgb(255,71,126)</small></div></div></div>

body{background:#f6f7fa}
.cpk{display:flex;flex-direction:column;gap:16px;background:#fff;padding:22px;border-radius:16px;box-shadow:0 10px 30px rgba(20,25,50,.08);font-family:system-ui,sans-serif}
.cpk input[type=color]{width:100%;height:60px;border:0;border-radius:10px;cursor:pointer;background:none}
.cpk-info{display:flex;align-items:center;gap:12px}
.cpk-sw{width:46px;height:46px;border-radius:10px;border:1px solid #e2e6ef}
.cpk-info span{display:block;font-weight:700;color:#1a1f36;font-family:ui-monospace,monospace}
.cpk-info small{color:#8a93ad;font-family:ui-monospace,monospace;font-size:12px}

var p=document.getElementById('picker');
function upd(){var h=p.value;document.getElementById('sw').style.background=h;document.getElementById('hex').textContent=h;var n=parseInt(h.slice(1),16);document.getElementById('rgb').textContent='rgb('+(n>>16&255)+','+(n>>8&255)+','+(n&255)+')'}
p.oninput=upd;upd();