在浏览器上使用此代码，用户可以使用许多字段，它可以更改R，G，B，HEX值，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
没有直接的方法可以获取单个颜色值，但可以轻松地手动完成。
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">颜色输入的值始终是一个七个字符长的十六进制颜色字符串，因此没有困难的边缘情况。
这种方法工作完美已经在这个问题的顶部
<input type="color" onchange="printColor(event)">
<script>
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}`)
console.log([r, g, b])
alert(`R: ${r}, G: ${g}, B: ${b}`)
}
</script>由于您已经从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()"><!DOCTYPE html>
<html>
<head>
<title>Get RGB color Code From Hex Code</title>
</head>
<body>
<input type="color" id="choose-color" />
<script>
var choose_color = document.getElementById("choose-color");
choose_color.onchange = function(){
var hex_code = this.value.split("");
var red = parseInt(hex_code[1]+hex_code[2],16);
var green = parseInt(hex_code[3]+hex_code[4],16);
var blue = parseInt(hex_code[5]+hex_code[6],16);
var rgb = red+","+green+","+blue;
alert(rgb);
}
</script>
</body>
</html>在这里查看 - https://jaischool.com/javascript-lang/convert-hex-code-in-rgb-color-format.html