Color Picker Input — Free HTML CSS JS Snippet

<div class="demo">
  <div class="picker-card">
    <div class="preview-bar" id="preview-bar"></div>
    <div class="picker-body">
      <label>Brand color</label>
      <div class="hex-row">
        <span class="hash">#</span>
        <input id="hex" class="hex-inp" value="6366F1" maxlength="6" oninput="fromHex(this.value)" />
        <input type="color" id="native" value="#6366f1" oninput="fromNative(this.value)" class="native-input" />
        <button class="eye-drop" title="Pick color" onclick="document.getElementById('native').click()">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 22l1-1h3l9-9"/><path d="M3 21v-3l9-9"/><path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8"/></svg>
        </button>
      </div>

      <div class="swatches">
        <span class="sw-label">Presets</span>
        <div class="sw-row" id="sw-row"></div>
      </div>

      <div class="opacity-row">
        <label>Opacity <span id="op-val">100%</span></label>
        <input type="range" id="opacity" min="0" max="100" value="100" oninput="setOpacity(this.value)" />
      </div>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }

.demo { width: 280px; }

.picker-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border: 1px solid #e2e8f0; }

.preview-bar { height: 72px; background: #6366f1; transition: background 0.2s; }

.picker-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
label { font-size: 12px; font-weight: 600; color: #475569; }

.hex-row { display: flex; align-items: center; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 8px; overflow: hidden; transition: border-color 0.15s; }
.hex-row:focus-within { border-color: #6366f1; }
.hash { padding: 0 8px; font-size: 13px; font-family: monospace; color: #94a3b8; }
.hex-inp { flex: 1; padding: 9px 0; font-size: 13px; font-family: monospace; border: none; outline: none; background: transparent; color: #1e293b; text-transform: uppercase; }

.native-input { opacity: 0; width: 0; height: 0; pointer-events: none; }
.eye-drop { width: 36px; height: 36px; background: none; border: none; border-left: 1px solid #e2e8f0; color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; }
.eye-drop:hover { background: #f1f5f9; color: #6366f1; }

.swatches { display: flex; flex-direction: column; gap: 8px; }
.sw-label { font-size: 12px; font-weight: 600; color: #475569; }
.sw-row { display: flex; gap: 6px; flex-wrap: wrap; }
.sw { width: 22px; height: 22px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: transform 0.12s, border-color 0.12s; }
.sw:hover { transform: scale(1.15); }
.sw.active { border-color: #1e293b; }

.opacity-row { display: flex; flex-direction: column; gap: 6px; }
.opacity-row label { display: flex; justify-content: space-between; }
input[type="range"] { width: 100%; height: 4px; -webkit-appearance: none; background: linear-gradient(to right, #6366f1 100%, #e2e8f0 100%); border-radius: 4px; outline: none; accent-color: #6366f1; }

const PRESETS = ['#ef4444','#f97316','#f59e0b','#22c55e','#0ea5e9','#6366f1','#8b5cf6','#ec4899','#1e293b','#94a3b8'];
const bar = document.getElementById('preview-bar');
const hexInp = document.getElementById('hex');
const native = document.getElementById('native');
let opacity = 100;

function applyColor(hex) {
  const r = parseInt(hex.slice(0,2),16), g = parseInt(hex.slice(2,4),16), b = parseInt(hex.slice(4,6),16);
  bar.style.background = `rgba(${r},${g},${b},${opacity/100})`;
  document.querySelector('input[type="range"]').style.background =
    `linear-gradient(to right, #${hex} ${opacity}%, #e2e8f0 ${opacity}%)`;
}

function fromHex(v) {
  if (v.length === 6 && /^[0-9a-fA-F]{6}$/.test(v)) {
    native.value = '#' + v;
    applyColor(v.toUpperCase());
  }
}

function fromNative(v) {
  const hex = v.slice(1).toUpperCase();
  hexInp.value = hex;
  applyColor(hex);
}

function setOpacity(v) {
  opacity = v;
  document.getElementById('op-val').textContent = v + '%';
  applyColor(hexInp.value);
}

// Build swatches
const row = document.getElementById('sw-row');
PRESETS.forEach(c => {
  const s = document.createElement('div');
  s.className = 'sw' + (c === '#6366f1' ? ' active' : '');
  s.style.background = c;
  s.onclick = () => {
    document.querySelectorAll('.sw').forEach(x => x.classList.remove('active'));
    s.classList.add('active');
    const hex = c.slice(1).toUpperCase();
    hexInp.value = hex; native.value = c;
    applyColor(hex);
  };
  row.appendChild(s);
});

applyColor('6366F1');