built-in HTML colour picker

Posted in :

2024-03-01

想使用一個選顏色的選取器, 試了一下 react-color:
https://casesandberg.github.io/react-color/#examples

是很酷炫, 但是跟 npm 不熟, 不知道怎麼套用.

試了一下 Bootstrap Colorpicker
https://itsjavi.com/bootstrap-colorpicker/index.html

由於 bootstrap 並不是用 4.x 版, 是用 5.x 版, 覺得交叉使用, 不知道會不會在神奇的地方出錯, 直接下載 .tar 檔, 解壓縮放進去網站, 選擇 with bootstrap 會出錯, 選擇 without bootstrap 需要下載 popper.js, 不知道會不會有新舊版本的衝突。這個解法, 也先跳過。

最後選擇, browser 內建 color picker:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

感覺用法很簡單, 也不需要另外下載 javascript 檔。只要一個 input tag 就做完了。

範例1:

<input type="color" id="p-color" value="#f6b73c" />

範例2:
https://stackoverflow.com/questions/65154794/how-can-i-get-the-rgb-values-from-color-picker-and-display-them

<td>Background Colour:</td>
  <td id="colorControls">
    <input type="color" id="colorChangeBG" onchange="getRGBColor(this)">
    <p>RGB:<span id="HexValue">"0, 0, 0"</span></p>
    </td>
  <td>-</td>

let colorChangeBG = document.getElementById("colorChangeBG").value;
let HexValue =  document.getElementById("HexValue");

function hexTorgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}


function getRGBColor(that){
 let thatv = that.value; 
 let rgbV = hexTorgb(thatv);
 
 console.log(thatv)
 console.log(rgbV);
 
 HexValue.innerHTML = rgbV;
}

javascript