原生 JavaScript 實現網頁拾色器：無依賴的顏色選取組件

方案一：HTML5 原生 <input type="color">（最簡單）

<input type="color" id="picker" value="#ff0000">
<script>
  document.getElementById('picker').addEventListener('input', function(e) {
    console.log('選顏色:', e.target.value); // #rrggbb
  });
</script>

支持：Chrome 20+、Firefox 29+、Edge 14+、Safari 12.1+。

方案二：Canvas 實現自定義拾色器（功能豐富）

<canvas id="palette" width="300" height="180"></canvas>
<div>選中顏色: <span id="colorValue">#000000</span></div>
<script>
const canvas = document.getElementById('palette');
const ctx = canvas.getContext('2d');
// 繪製漸變色板
const grad = ctx.createLinearGradient(0, 0, canvas.width, 0);
['#f00','#ff0','#0f0','#0ff','#00f','#f0f','#f00'].forEach((c,i) => grad.addColorStop(i/6, c));
ctx.fillStyle = grad; ctx.fillRect(0,0,canvas.width,canvas.height);
const gradV = ctx.createLinearGradient(0,0,0,canvas.height);
gradV.addColorStop(0, 'rgba(255,255,255,1)');
gradV.addColorStop(0.5, 'rgba(255,255,255,0)');
gradV.addColorStop(1, 'rgba(0,0,0,1)');
ctx.fillStyle = gradV; ctx.fillRect(0,0,canvas.width,canvas.height);

canvas.addEventListener('click', e => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left, y = e.clientY - rect.top;
  const pixel = ctx.getImageData(x, y, 1, 1).data;
  const hex = '#' + [pixel[0],pixel[1],pixel[2]].map(v => v.toString(16).padStart(2,'0')).join('');
  document.getElementById('colorValue').textContent = hex;
});
</script>

第三方無依賴庫推薦

• Pickr：模塊化、無依賴、支持觸摸、多種顏色空間。
• Bootstrap Colorpicker：若項目已用 Bootstrap/jQuery。

更多拾色器資源