HTML5 输入类型 Color 读取单个 RGB 值

Question

通过浏览器上的此代码，用户可以使用许多字段，它可以更改 R、G、B、HEX VALUE、HUE ecc。我只需要读取红色值。

  <input id="color_pick"type="color" value="#ff0000">

var toread = document.getElementById('color_pick');
toread.value # get the hex 
toread.value.red() # would it be possible to get r?

我已阅读此文档，但无法弄清楚如何从输入中获取单个 R 值。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/color

Answer 1

没有直接的方法来获取各个颜色值，但可以轻松地手动完成。

function printColor(ev) {
  const color = ev.target.value
  const r = parseInt(color.substr(1,2), 16)
  const g = parseInt(color.substr(3,2), 16)
  const b = parseInt(color.substr(5,2), 16)
  console.log(`red: ${r}, green: ${g}, blue: ${b}`)
}

<input type="color" onchange="printColor(event)" value="#ff0000">

颜色输入的值始终是七个字符长的十六进制颜色字符串，因此不存在困难的边缘情况。

Answer 2

由于node.value属性中已经有十六进制，因此只需将其转换为整数即可。

function pickRedInt(){
  var toread = document.getElementById('color_pick');
  console.log("Red Value - "+parseInt("0x"+toread.value.slice(1,3)));
}

pickRedInt();

Try changing this:
<hr>
<input id="color_pick"type="color" value="#ff0000" onchange="pickRedInt()">