Color Wheel Picker HTML CSS JS — HSL Canvas Picker

<div class="app">
  <div class="picker-wrap">
    <canvas id="wheelCanvas" width="320" height="320"></canvas>
    <div class="preview-panel">
      <div id="preview" class="preview-swatch"></div>
      <div class="values">
        <div class="val-row">
          <span class="val-label">HEX</span>
          <span id="hexVal" class="val-text">#ff0000</span>
          <button id="copyBtn" class="copy-btn">Copy</button>
        </div>
        <div class="val-row">
          <span class="val-label">RGB</span>
          <span id="rgbVal" class="val-text">255, 0, 0</span>
        </div>
        <div class="val-row">
          <span class="val-label">HSL</span>
          <span id="hslVal" class="val-text">0°, 100%, 50%</span>
        </div>
        <div class="hex-input-row">
          <input type="text" id="hexInput" placeholder="#ff0000" maxlength="7" spellcheck="false">
        </div>
      </div>
      <div class="recent-label">Recent</div>
      <div id="recentColors" class="recent-colors"></div>
    </div>
  </div>
</div>

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #1a1a2e; color: #e0e0e0; font-family: system-ui, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.app { padding: 20px; }
.picker-wrap { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
#wheelCanvas { cursor: crosshair; border-radius: 50%; }
.preview-panel { display: flex; flex-direction: column; gap: 14px; min-width: 180px; }
.preview-swatch { width: 180px; height: 90px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.1); background: red; transition: background 0.1s; }
.values { display: flex; flex-direction: column; gap: 8px; }
.val-row { display: flex; align-items: center; gap: 8px; }
.val-label { font-size: 11px; font-weight: 600; color: #606080; min-width: 32px; }
.val-text { font-size: 13px; color: #c0c0e0; font-family: monospace; flex: 1; }
.copy-btn {
  padding: 2px 10px; background: #0f3460; border: 1px solid #4a90d9;
  border-radius: 4px; color: #a0c0ff; font-size: 11px; cursor: pointer; transition: all 0.15s;
}
.copy-btn:hover { background: #4a90d9; color: #fff; }
.hex-input-row { margin-top: 4px; }
#hexInput {
  width: 100%; padding: 6px 10px; background: #0d0d1a; border: 1px solid #0f3460;
  border-radius: 6px; color: #e0e0ff; font-family: monospace; font-size: 14px;
  outline: none; text-transform: uppercase;
}
#hexInput:focus { border-color: #4a90d9; }
.recent-label { font-size: 11px; color: #606080; font-weight: 600; }
.recent-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.recent-swatch {
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; transition: border-color 0.15s;
}
.recent-swatch:hover { border-color: rgba(255,255,255,0.4); }

const canvas = document.getElementById('wheelCanvas');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
const cx = W/2, cy = H/2;
const RING_OUTER = 140, RING_INNER = 110;
const SQ_SIZE = 140;

let hue = 0, sat = 1, bri = 1;
let dragging = null;
let recentColors = [];

function hslToRgb(h, s, l) {
  s /= 100; l /= 100;
  const k = n => (n + h/30) % 12;
  const a = s * Math.min(l, 1-l);
  const f = n => l - a * Math.max(-1, Math.min(k(n)-3, Math.min(9-k(n), 1)));
  return [Math.round(f(0)*255), Math.round(f(8)*255), Math.round(f(4)*255)];
}

function rgbToHex(r, g, b) {
  return '#' + [r,g,b].map(v => v.toString(16).padStart(2,'0')).join('');
}

function hexToHsl(hex) {
  hex = hex.replace('#','');
  if (hex.length !== 6) return null;
  const r = parseInt(hex.slice(0,2),16)/255;
  const g = parseInt(hex.slice(2,4),16)/255;
  const b = parseInt(hex.slice(4,6),16)/255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h2, s2, l2 = (max+min)/2;
  if (max === min) { h2 = s2 = 0; }
  else {
    const d = max-min;
    s2 = l2 > 0.5 ? d/(2-max-min) : d/(max+min);
    switch(max) {
      case r: h2 = (g-b)/d + (g<b?6:0); break;
      case g: h2 = (b-r)/d + 2; break;
      default: h2 = (r-g)/d + 4;
    }
    h2 /= 6;
  }
  return [h2*360, s2*100, l2*100];
}

function drawWheel() {
  // Draw hue ring
  for (let a = 0; a < 360; a++) {
    const start = (a-0.5) * Math.PI/180;
    const end = (a+1) * Math.PI/180;
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(cx, cy, RING_OUTER, start, end);
    ctx.closePath();
    ctx.fillStyle = `hsl(${a},100%,50%)`;
    ctx.fill();
  }
  // Punch inner hole
  ctx.beginPath();
  ctx.arc(cx, cy, RING_INNER, 0, Math.PI*2);
  ctx.fillStyle = '#1a1a2e';
  ctx.fill();

  // Draw SB square
  const half = SQ_SIZE/2;
  const sq = ctx.createLinearGradient(cx-half, cy, cx+half, cy);
  sq.addColorStop(0, '#fff');
  sq.addColorStop(1, `hsl(${hue},100%,50%)`);
  ctx.fillStyle = sq;
  ctx.fillRect(cx-half, cy-half, SQ_SIZE, SQ_SIZE);
  const sq2 = ctx.createLinearGradient(cx, cy-half, cx, cy+half);
  sq2.addColorStop(0, 'rgba(0,0,0,0)');
  sq2.addColorStop(1, '#000');
  ctx.fillStyle = sq2;
  ctx.fillRect(cx-half, cy-half, SQ_SIZE, SQ_SIZE);

  // Hue handle on ring
  const angle = (hue - 90) * Math.PI / 180;
  const rm = (RING_OUTER + RING_INNER) / 2;
  const hx = cx + Math.cos(angle)*rm;
  const hy = cy + Math.sin(angle)*rm;
  ctx.beginPath();
  ctx.arc(hx, hy, 8, 0, Math.PI*2);
  ctx.strokeStyle = '#fff';
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.fillStyle = `hsl(${hue},100%,50%)`;
  ctx.fill();

  // SB handle
  const sx = cx - half + sat * SQ_SIZE;
  const sy = cy - half + (1-bri) * SQ_SIZE;
  ctx.beginPath();
  ctx.arc(sx, sy, 7, 0, Math.PI*2);
  ctx.strokeStyle = '#fff';
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.fillStyle = getCurrentHex();
  ctx.fill();
}

function getCurrentHex() {
  const l = bri * (1 - sat/2);
  const s2 = l === 0 || l === 1 ? 0 : (bri-l)/Math.min(l,1-l);
  const [r,g,b] = hslToRgb(hue, s2*100, l*100);
  return rgbToHex(r,g,b);
}

function getCurrentColor() {
  const l = bri * (1 - sat/2);
  const s2 = l === 0 || l === 1 ? 0 : (bri-l)/Math.min(l,1-l);
  return { h: hue, s: s2*100, l: l*100 };
}

function updateUI() {
  drawWheel();
  const hex = getCurrentHex();
  const c = getCurrentColor();
  const [r,g,b] = hslToRgb(c.h, c.s, c.l);
  document.getElementById('preview').style.background = hex;
  document.getElementById('hexVal').textContent = hex;
  document.getElementById('rgbVal').textContent = `${r}, ${g}, ${b}`;
  document.getElementById('hslVal').textContent = `${Math.round(c.h)}°, ${Math.round(c.s)}%, ${Math.round(c.l)}%`;
  document.getElementById('hexInput').value = hex;
}

function addRecent(hex) {
  if (recentColors[0] === hex) return;
  recentColors = [hex, ...recentColors.filter(c => c !== hex)].slice(0, 8);
  renderRecent();
}

function renderRecent() {
  const el = document.getElementById('recentColors');
  el.innerHTML = '';
  recentColors.forEach(c => {
    const sw = document.createElement('div');
    sw.className = 'recent-swatch';
    sw.style.background = c;
    sw.title = c;
    sw.addEventListener('click', () => setFromHex(c));
    el.appendChild(sw);
  });
}

function setFromHex(hex) {
  const res = hexToHsl(hex);
  if (!res) return;
  const [h, s, l] = res;
  hue = h;
  sat = s > 0 ? (1 - l/50 / (1 + Math.abs(1 - l/50))) : 0;
  // Simplified: convert HSL to SB space
  const maxL = (1 - s/100/2);
  const minL = (s/100/2);
  bri = (l/100 + minL) / (1 - s/100/2 + minL) || 0;
  sat = s > 0 ? (2 - 2*l/100/(bri||1)) / 2 : 0;
  sat = Math.max(0, Math.min(1, sat));
  bri = Math.max(0, Math.min(1, bri));
  updateUI();
}

canvas.addEventListener('pointerdown', e => {
  canvas.setPointerCapture(e.pointerId);
  const r = canvas.getBoundingClientRect();
  const mx = (e.clientX - r.left) * (W / r.width);
  const my = (e.clientY - r.top) * (H / r.height);
  const dx = mx - cx, dy = my - cy;
  const dist = Math.sqrt(dx*dx + dy*dy);
  const half = SQ_SIZE/2;
  if (dist >= RING_INNER && dist <= RING_OUTER) {
    dragging = 'hue';
  } else if (Math.abs(dx) <= half && Math.abs(dy) <= half) {
    dragging = 'sb';
  }
  handleMove(mx, my);
});

canvas.addEventListener('pointermove', e => {
  if (!dragging) return;
  const r = canvas.getBoundingClientRect();
  handleMove((e.clientX - r.left) * (W/r.width), (e.clientY - r.top) * (H/r.height));
});

canvas.addEventListener('pointerup', () => {
  if (dragging) {
    addRecent(getCurrentHex());
    dragging = null;
  }
});

function handleMove(mx, my) {
  const dx = mx - cx, dy = my - cy;
  if (dragging === 'hue') {
    hue = (Math.atan2(dy, dx) * 180/Math.PI + 90 + 360) % 360;
  } else if (dragging === 'sb') {
    const half = SQ_SIZE/2;
    sat = Math.max(0, Math.min(1, (mx - (cx-half)) / SQ_SIZE));
    bri = Math.max(0, Math.min(1, 1 - (my - (cy-half)) / SQ_SIZE));
  }
  updateUI();
}

document.getElementById('copyBtn').addEventListener('click', () => {
  const hex = document.getElementById('hexVal').textContent;
  navigator.clipboard.writeText(hex).catch(() => {});
  document.getElementById('copyBtn').textContent = 'Copied!';
  setTimeout(() => document.getElementById('copyBtn').textContent = 'Copy', 1500);
});

document.getElementById('hexInput').addEventListener('keydown', e => {
  if (e.key === 'Enter') {
    const val = e.target.value.startsWith('#') ? e.target.value : '#' + e.target.value;
    setFromHex(val);
    addRecent(val);
  }
});

updateUI();